Display partial view in a view using mvc 4

Question

I want to display a partial view inside a main view upon clicking view link, within the same page. Help me please, I am newbie in MVC. Is there any other way to do it other than using the Ajax.ActionLink()?

This is my Add Detail controller.

public ActionResult DisplayDetails()  
        {  
             SqlConnection connect = new SqlConnection(ConfigurationManager.ConnectionStrings["connect"].ToString());  
            connect.Open();  
            DataSet ds = ExecuteQuery("select EmployeeID, EmployeeName, EmailID from EmployeeDetails");  
            IList<AddDetails> lst = new List<AddDetails>();  
            AddDetails ad;  
            foreach (DataRow dr in ds.Tables[0].Rows)  
            {  
                ad = new AddDetails();  
                ad.EmployeeId = Convert.ToInt32(dr["EmployeeID"]);  
                ad.EmployeeName = dr["EmployeeName"].ToString();  
                ad.EmailId = dr["EmailID"].ToString();  
                lst.Add(ad);  
            }  
            connect.Close();  
            return PartialView("DisplayDetails", lst);  
        }

Here is the main view AddDetail view(main view).

@model mvcEmployeeTask.Models.AddDetails
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
@using (Html.BeginForm("AddDetail", "AddDetails", FormMethod.Post))
{

    <table>
        @*        <tr>
            <td>
                @(Html.Label("Employee ID : "))
            </td>
            <td>
                @Html.TextBoxFor(model => model.EmployeeId)
                @Html.HiddenFor(model => model.EmployeeId)
            </td>
        </tr>*@
        @Html.HiddenFor(model => model.EmployeeId)
        <tr>
            <td>
                @(Html.Label("Employee Name : "))
            </td>
            <td>
                @(Html.TextBoxFor(model => model.EmployeeName))
            </td>
        </tr>
        <tr>
            <td>
                @(Html.Label("Email ID : "))
            </td>
            <td>
                @(Html.TextBoxFor(model => model.EmailId))
            </td>
        </tr>
        <tr>
            <td>
                <input type="submit" value="submit" name="Add" />
            </td>
            <td>
                @* @Html.ActionLink("View", "DisplayDetails")*@
                @Html.ActionLink("View", "DisplayDetails")
            </td>
        </tr>
    </table>



    @Html.Action("DisplayDetails", "AddDetails");

}

Here is the partial view (Display view).

@model IList<mvcEmployeeTask.Models.AddDetails>

@{
    Layout = null;
}
@using (Html.BeginForm("DisplayDetails", "AddDetails", FormMethod.Get))
{
    <!DOCTYPE html>

    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>DisplayDetails</title>
         <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    </head>
    <body> <div class="table" align="center">
            <table border="1" >
                <tr>
                    <th>EmployeeID</th>
                    <th>EmployeeName</th>
                    <th>Email</th>
                </tr>

                @foreach (var item in Model)
                {
                    <tr>
                        <td>
                            @item.EmployeeId
                        </td>
                        <td>
                            @item.EmployeeName
                        </td>
                        <td>
                            @item.EmailId
                        </td>
                        <td>
                             @Html.ActionLink("Edit", "EditDetails", new { id= item.EmployeeId })
                        </td>
                        <td>
                             @Html.ActionLink("Delete", "DeleteDetails", new { id= item.EmployeeId })
                        </td>
                    </tr>

                }
            </table>
        </div>


    </body>
    </html>
}

Please Help me!!

firstly correct your actionlink as @Html.ActionLink("DisplayDetails", "View") and in order to load partial on click of actionlink then you can do it with jquery(ajax request) — Kartikeya Khosla, Sep 11 '14 at 08:32
Okay, is there any other method without using jQuery? There is a similar kind of issue. Url is provided below: http://stackoverflow.com/questions/7295835/how-can-i-load-partial-view-inside-the-view/25781248#25781248 — Newbie, Sep 11 '14 at 08:36
without using ajax helpers and jquery.. i don't think its possible.. — Kartikeya Khosla, Sep 11 '14 at 08:39
Can you able to help me? I have made a correction like you mentioned. — Newbie, Sep 11 '14 at 08:45
You main view has a simpler Model than the partial View (which is a list of the single item the main view has). That does not appear to be correct (it seems backwards). can you clarify? — iCollect.it Ltd, Sep 11 '14 at 09:31
Yeah, TrueBlueAussie. I have omitted some of the parts in the main view. Will edit and show the full details. — Newbie, Sep 11 '14 at 11:20

Shah Abdullah · Accepted Answer · 2014-09-11T15:07:47.093

3

You should use

@Ajax.ActionLink

Reason:

Ajax.ActionLink is much like Html.ActionLink counterpart, it also creates the hyperlink Click here but when user clicks it and have the JavaScript enabled browser, Ajax.ActionLink sends the asynchronous request instead of navigating to new URL. With Ajax.ActionLink we specify what controller’s action method to invoke and also specify what to do with the response coming back from the action method and it suits your case really well.

Instead of

@Html.ActionLink("View", "DisplayDetails")

Description:

It will render the partial view on the same index screen instead of opening new window.

Something like this

@Ajax.ActionLink(" ", "ViewDetails", "Auditor", new AjaxOptions { UpdateTargetId = "yourviewDiv"}) //yourviewdiv is id of div where you want to show your partial view onClick

Your Main View

@model mvcEmployeeTask.Models.AddDetails  

<div id = "yourviewDiv">
  // it will populate your partial view here.
</div>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> 

@using (Html.BeginForm("AddDetail", "AddDetails", FormMethod.Post))  
{  
@Ajax.ActionLink(" ", "ViewDetails", "Auditor", new AjaxOptions { UpdateTargetId = "yourviewDiv"})
}

edited Sep 11 '14 at 15:07

answered Sep 11 '14 at 09:17

Shah Abdullah

405
2
16

Question states: "Is there any other way to do it **other than using the Ajax.ActionLink()**". You may want to clarify why he should use. – iCollect.it Ltd Sep 11 '14 at 09:35
@TrueBlueAussie Yes you are right I must tell the reason, so edited my question and provided reason for using it thanks for your helpful comment . – Shah Abdullah Sep 11 '14 at 09:41
Better, but don't you need to at least specify the `UpdateTargetId` in an `AjaxOptions` parameter so it knows where to place the content returned? – iCollect.it Ltd Sep 11 '14 at 09:43
@TrueBlueAussie He must have list of items in main view so if he click on particular item in view he can pass through parameter as well like @Ajax.ActionLink(" ", "ViewDetails", "Auditor", new { id = item.id }, new AjaxOptions { UpdateTargetId = "yourviewDiv"}) if there is no list of items then simply @Ajax.ActionLink(" ", "ViewDetails", "Auditor", new AjaxOptions { UpdateTargetId = "yourviewDiv"}) – Shah Abdullah Sep 11 '14 at 09:50
But its redirecting to new page. I want to display within the same page. – Newbie Sep 11 '14 at 12:01
Help me, still redirecting to new page, partial view is not displaying within the main view! – Newbie Sep 11 '14 at 14:09
@TrueBlueAussie Thank you it made my answer very much meaningful. – Shah Abdullah Sep 15 '14 at 07:46

score 0 · Answer 2 · edited Sep 11 '14 at 09:52

0

load following div using its id on particular event(say button click of your main view) then partial view will be load on your main view.

<div id="loadpartialview">
    @Html.Partial("_yourPartialViewName")
</div>

edited Sep 11 '14 at 09:52

cpoDesign

8,953
13
62
106

answered Sep 11 '14 at 09:07

V2Solutions - MS Team

1,129
6
6

This code will *always* load the partial view. Can you please explain what you mean in more detail? – iCollect.it Ltd Sep 11 '14 at 09:37
Until and unless you don't load div tag your partial view will not load directly. $("#loadpartialview").show(); // This code will load your partial view – V2Solutions - MS Team Sep 11 '14 at 10:51
I think you have client and server operations confused. `@Html.Partial` renders partial views *server-side* before the page is returned. `$("#loadpartialview").show();` will not cause it to load when it is shown. It will just show the div (assuming it was hidden, which your example does not mention). – iCollect.it Ltd Sep 11 '14 at 11:10
PS. Your company website appears to be offline (I was curious what you do there). – iCollect.it Ltd Sep 11 '14 at 11:16
it is exactly what i want: load a partial on load of the (main) view and hence this is a valid example – real_yggdrasil Mar 08 '21 at 15:45

score -1 · Answer 3 · edited May 23 '17 at 12:16

-1

here is nice tutorial how to implement it:

http://mvc4beginner.com/Tutorial/MVC-Partial-Views.html

The simple version of code is

  <div>
    @Html.Partial("PartialView1", Model.partialModel)

</div>

Theory:

To have it dynamic you need to create ajax call to render the action on server and insert the result to the page.

the question how to implement this has been already answered here:

MVC Partial view with controller, ajax - how do I ge the partial controller to get data?

edited May 23 '17 at 12:16

Community

1
1

answered Sep 11 '14 at 09:11

cpoDesign

8,953
13
62
106

1

The question asks how to load the partial view dynamically (on link click etc). This will just inject the partial view into the view. – iCollect.it Ltd Sep 11 '14 at 09:39
The other answer you referenced is not a good answer. Best you attempt to answer it yourself. `Ajax.ActionLink` is an appropriate solution here. – iCollect.it Ltd Sep 11 '14 at 10:22

Display partial view in a view using mvc 4

3 Answers3

Linked