Display partial view in a view using mvc 4

asp.net-mvc asp.net-mvc-4 razor asp.net-mvc-partialview

16,541

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

16,541

Author by

Newbie

Beginner in Asp.net mvc! Loves coding.

Updated on June 04, 2022

Comments

Newbie almost 2 years

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!!