TempData in MVC

TempData used to store temporary data which can be used in the subsequent request by the user. TempData will be cleared out after the completion of a subsequent request.

TempData is useful when you want to transfer non-sensitive data from one action method to another action method of the same or a different controller as well as redirects. It is dictionary type which is derived from TempDictionary.

Adding a key-value pair in TempData as shown in the below example.

Example: TempData


public class AventController : Controller
{
    // GET: Student
    public AventController()
    {

    }
    public ActionResult Index()
    {
        TempData["name"] = "Test data";
        TempData["age"] = 30;

        return View();
    }

    public ActionResult About()
    {
        string userName;
        int userAge;
        
        if(TempData.ContainsKey("name"))
            userName = TempData["name"].ToString();
    
        if(TempData.ContainsKey("age"))
            userAge = int.Parse(TempData["age"].ToString());
    
        // do something with userName or userAge here 

        return View();
    }
}

In the above code, we added data into TempData and accessed the same data using a key inside another action method. Notice that we have converted values into the appropriate type.

As you can see in the above example, we add test data in TempData in the first request and in the second subsequent request we access test data from TempData which we stored in the first request. However, you can’t get the same data in the third request because TempData will be cleared out after second request.

Call TempData.Keep() to retain TempData values in a third consecutive request.

Example: TempData.Keep()


public class AventController : Controller
{
    // GET: Student
    public AventController()
    {

    }
    public ActionResult Index()
    {
        TempData["myData"] = "Test data";
        return View();
    }

    public ActionResult About()
    {
        string data;
        
        if(TempData["myData"] != null)
            data = TempData["myData"] as string;
        
        TempData.Keep();
        
        return View();
    }

    public ActionResult Contact()
    {
        string data;
        
        if(TempData["myData"] != null)
            data = TempData["myData"] as string;
            
        return View();
    }

}

July 3, 2017

ViewData in MVC

ViewData is similar to ViewBag. We use to transfer the data from Controller to View.

ViewData is a dictionary which can contain key-value pairs where each key must be string.

The following figure illustrates the ViewData.

ViewData only transfers data from controller to view, not vice-versa and It is valid only during the current request.

The following example demonstrates how to transfer data from controller to view using ViewData.

Example: ViewData in Action method


public ActionResult Index()
{
    IList<Student> studentList = new List<Student>();
    studentList.Add(new Student(){ StudentName = "Bill" });
    studentList.Add(new Student(){ StudentName = "Steve" });
    studentList.Add(new Student(){ StudentName = "Ram" });

    ViewData["students"] = studentList;
  
    return View();
}

In the above example, we have added a student list with the key “students” in the ViewData dictionary. So now, the student list can be accessed in a view as shown below.

Example: Access ViewData in a Razor View


<ul>
@foreach (var std in ViewData["students"] as IList<Student>)
{
    <li>
        @std.StudentName
    </li>
}
</ul>

Notice that we need to cast the ViewData values to the appropriate data type.

We can also add a KeyValuePair into ViewData as shown below.

Example: Adding KeyValuePair in ViewData


public ActionResult Index()
{
    ViewData.Add("Id", 1);
    ViewData.Add(new KeyValuePair<string, object>("Name", "Bill"));
    ViewData.Add(new KeyValuePair<string, object>("Age", 20));

    return View();
}

ViewData and ViewBag both use the same dictionary internally. So we cannot have ViewData Key matches with the property name of ViewBag, otherwise it will throw a runtime exception.

Example: ViewBag and ViewData


public ActionResult Index()
{
    ViewBag.Id = 1;

    ViewData.Add("Id", 1); // throw runtime exception as it already has "Id" key
    ViewData.Add(new KeyValuePair<string, object>("Name", "Bill"));
    ViewData.Add(new KeyValuePair<string, object>("Age", 20));

    return View();
}

July 3, 2017

ViewBag in ASP.NET MVC

ViewBag is useful to transfer temporary data (which is not included in model) from the controller to the view. The viewBag is a dynamic type property of ControllerBase class which is the base class of all the controllers.

The following figure illustrates the ViewBag.

In the above figure, it attaches Name property to ViewBag with the dot notation and assigns a string value to “Bill” to it in the controller. This can be accessed in the view like @ViewBag.Name. (@ is razor syntax to access the server side variable.)

You can assign any number of properties and values to ViewBag. If you assign the same property name multiple times to ViewBag, then it will only consider last value assigned to the property.

The following example demonstrates how to transfer data from controller to view using ViewBag.

Example: Set ViewBag in Action method


namespace MVC_BasicTutorials.Controllers
{
    public class StudentController : Controller
    {
        IList<Student> studentList = new List<Student>() { 
                    new Student(){ StudentID=1, StudentName="Steve", Age = 21 },
                    new Student(){ StudentID=2, StudentName="Bill", Age = 25 },
                    new Student(){ StudentID=3, StudentName="Ram", Age = 20 },
                    new Student(){ StudentID=4, StudentName="Ron", Age = 31 },
                    new Student(){ StudentID=5, StudentName="Rob", Age = 19 }
                };
        // GET: Student
        public ActionResult Index()
        {
            ViewBag.TotalStudents = studentList.Count();

            return View();
        }

    }
}

In the above example, we want to display the total number of students in a view for the demo. So, we have attached the TotalStudents property to the ViewBag and assigned the student count using studentList.Count().

Now, in the Index.cshtml view, you can access ViewBag.TotalStudents property and display all the student info as shown below.

Example: Acess ViewBag in a View

<label>Total Students:</label>  @ViewBag.TotalStudents

Output:


Total Students: 5

ViewBag doesn’t require typecasting while retriving values from it.

Internally, ViewBag is a wrapper around ViewData. It will throw a runtime exception, if the ViewBag property name matches with the key of ViewData.

July 3, 2017

Partial Views in MVC

Partial View:

In this section you will learn about partial views in ASP.NET MVC.

What is Partial View?

Partial view is a reusable view, which can be used as a child view in multiple other views. It eliminates duplicate coding by reusing same partial view in multiple places. You can use the partial view in the layout view, as well as other content views.

To start with, let’s create a simple partial view for the following navigation bar for demo purposes. We will create a partial view for it, so that we can use the same navigation bar in multiple layout views without rewriting the same code everywhere.

The following figure shows the html code for the above navigation bar. We will cut and paste this code in a seperate partial view for demo purposes.

Create New Partial View:

To create a partial view, right click on Shared folder -> select Add -> click on View..

Note :If a partial view will be shared with multiple views of different controller folder then create it in the Shared folder, otherwise you can create the partial view in the same folder where it is going to be used.

In the Add View dialogue, enter View name and select “Create as a partial view” checkbox and click Add.

We are not going to use any model for this partial view, so keep the Template dropdown as Empty (without model) and click Add. This will create an empty partial view in Shared folder.

Now, you can cut the above code for navigation bar and paste it in _HeaderNavBar.cshtml as shown below:

Partial View: _HeaderNavBar.cshtml

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                <li>@Html.ActionLink("About", "About", "Home")</li>
                <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
            </ul>
        </div>
    </div>
</div>

Thus, you can create a new partial view. Let’s see how to render partial view.

Render Partial View:

You can render the partial view in the parent view using html helper methods: Partial() or RenderPartial() or RenderAction(). Each method serves different purposes. Let’s have an overview of each method and then see how to render partial view using these methods.

Html.Partial():

@Html.Partial() helper method renders the specified partial view. It accept partial view name as a string parameter and returns MvcHtmlString. It returns html string so you have a chance of modifing the html before rendering.

The following table lists overloads of the Partial helper method:

Helper Method	Description
MvcHtmlString Html.Partial(string partialViewName)	Renders the given partial view content in the referred view.
MvcHtmlString Html.Partial(string partialViewName,object model)	Renders the partial view content in the referred view. Model parameter passes the model object to the partial view.
MvcHtmlString Html.Partial(string partialViewName, ViewDataDictionary viewData)	Renders the partial view content in the referred view. View data parameter passes view data dictionary to the partial view.
MvcHtmlString Html.Partial(string partialViewName,object model, ViewDataDictionary viewData)	Renders the partial view content in the referred view. Model parameter passes the model object and View data passes view data dictionary to the partial view.

Html.RenderPartial():

The RenderPartial helper method is same as the Partial method except that it returns void and writes resulted html of a specified partial view into a http response stream directly.

Helper method	Description
RenderPartial(String partialViewName)	Renders the specified partial view
RenderPartial(String partialViewName, Object model)	Renders the specified partial view and set the specified model object
RenderPartial(String partialViewName, ViewDataDictionary viewData)	Renders the specified partial view, replacing its ViewData property with the specified ViewDataDictionary object.
RenderPartial(String partialViewName, Object model, ViewDataDictionary viewData)	Renders the specified partial view, replacing the partial view’s ViewData property with the specified ViewDataDictionary object and set the specified model object

Html.RenderAction():

The RenderAction helper method invokes a specified controller and action and renders the result as a partial view. The specified Action method should return PartialViewResult using the Partial() method.

Name	Description
RenderAction(String actionName)	Invokes the specified child action method and renders the result in the parent view.
RenderAction(String actionName, Object routeValue)	Invokes the specified child action method using the specified parameters and renders the result inline in the parent view.
RenderAction(String actionName, String controllerName)	Invokes the specified child action method using the specified controller name and renders the result inline in the parent view.
RenderAction(String actionName, RouteValueDictionary routeValues)	Invokes the specified child action method using the specified parameters and renders the result inline in the parent view.
RenderAction(String actionName, String controllerName, Object routeValue)	Invokes the specified child action method using the specified parameters and controller name and renders the result inline in the parent view.
RenderAction(String actionName, String controllerName, RouteValueDictionary routeValues)	Invokes the specified child action method using the specified parameters and controller name and renders the result inline in the parent view.

So now, we can use any of the above rending methods to render the _HeaderNavBar partial view into _Layout.cshtml. The following layout view renders partial view using the RenderPartial() method.

Example: Html.RenderPartial()

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css") 
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    @{
        Html.RenderPartial("_HeaderNavBar");   
    }
    <div class="container body-content">
        @RenderBody()
        
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

Note :RenderPartial returns void, so a semicolon is required at the end and so it must be enclosed in the braces.

The following layout view uses the Partial method to render partial view_HeaderNavBar.cshtml.

Example: Html.Partial()

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css") 
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
     @Html.Partial("_HeaderNavBar")   
    <div class="container body-content">
        @RenderBody()
        
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

Note :@Html.Partial() method doesn’t need to be in code block because it returns a html string.

You will see following UI in browser when you run the application.