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
Okay, is there any other method without using jQuery? There is a similar kind of issue. Url is provided below: stackoverflow.com/questions/7295835/… — Newbie
without using ajax helpers and jquery.. i don't think its possible.. — Kartikeya Khosla
Can you able to help me? I have made a correction like you mentioned. — Newbie
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? — Gone Coding

Shah Abdullah Shah Abdullah · Accepted Answer · 2014-09-11T09:17:22

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"})
}

Display partial view in a view using mvc 4

3 Answers