Friday, 5 July 2013

Partial View in Asp.Net MVC4

If you want to reuse a view in your web application, you can go for partial view concept. Partial view is like regular view with file extension .cshtml.We can use partial view when the situation like we need a header, footer reuse for the mvc web application. We can say that it’s like a user control concept in
Here i am going to explain how to create a partial view in mvc 4 application.
First add a view to shared folder with view name _Product .the best way to create partial view with name preceded by '_', because the name specifying that it is reusable.

Here in this example, I am using the partial view to display the item selected in the webgrid.
Creating  webgrid example is in below link:
Add html controls in partial view fir display the selected item.

            @Html.TextBox("Id", Model.Id)
            @Html.TextBox("Name", Model.Id)
            @Html.TextBox("Description", Model.Description)
            @Html.TextBox("Quantity", Model.Quantity)

We can call the partial view in a normal view like:

Html.RenderPartial("~/Views/Shared/_Product.cshtml", product);
@Html.Partial("~/Views/Shared/_Product.cshtml", product);

Html.Partial returns a string, Html.RenderPartial calls Write internally, and returns void. You can store the output of Html.Partial in a variable, or return it from a function. You cannot do this with Html.RenderPartial.Because the result will be written to the Response stream during the execution. So @html.RenderPartial() has fast execution than @html.Partial() due to RenderPartial give quick response to Output.
We can call the partial view if grid have any selected item. The code block is here:

@if (grid.HasSelection)
             product =(PartialViewSample.Models.Product)grid.Rows[grid.SelectedIndex].Value;       
             Html.RenderPartial("~/Views/Shared/_Product.cshtml", product);          
In the above if you want to send the selected item into an action you can add a column with action link and send the selected item.

grid.Column("Detail", format: @<text>@Html.ActionLink("Select", "Submit", new { QtId = item.QtId }) </text>)

And in the action get the  selected item and pass as parameter to display view.

public ActionResult Submit(Product product)
   return View(product);


  1. This comment has been removed by a blog administrator.

  2. It is very Excellent sample, minor bug:

    grid.Column("Detail", format: @@Html.ActionLink("Select", "Submit", new { QtId = item.QtId }) )

    Should like this:
    item.QtId --- > item.Id

  3. How to create SubmitView page? I can't get data for product in control file, it is NULL in submit(Product product)

  4. Partial Views :

    A partial view is a view that is rendered inside a parent view .
    It is similar to an user control(.ascx) of a typical web form application.
    It is a reusable view that can be used across multiple views in a mvc site.

    Using Partial View :

    As like creating a view, we can also create a partial view, provided in the “Add View” dialog box, check the option “Create as a partial view”.

    For rendering the partial view

    Use the Partial or RenderPartial method of Html helper to render partial view.

    Public ActionResult Index()
    return PartialView();

    The Partial method returns a string.

    The RenderPartial method is also similar to Partial method but it renders the output to a response stream
    @{ Html.RenderPartial(“Details”); }

  5. TechnoSoftwar proficient in web design and development, Mobile Apps development, Customized ERPs, CRMs, Web & Mobile Applications, eCommerce platforms etc. TechnoSoftwar deliver best Quality IT solutions on time. TechnoSoftwar having qualified and experienced IT professionals that works for your all business demands.

  6. This blog gives very important info about .Net
    Very nice Thanks for sharing .Net Online Course Hyderabad

  7. Nice! you are sharing such helpful and easy to understandable blog. i have no words for say i just say thanks because it is helpful for me.

    Dot Net Training in Chennai | Dot Net Training in anna nagar | Dot Net Training in omr | Dot Net Training in porur | Dot Net Training in tambaram | Dot Net Training in velachery