How to render a partial view (using razor) after user click?

Question

I've been searching for a solution, but every thing I tried didn't help, although it seems very easy. I'm sure some of you will know what should I do.

I am using ASP.NET MVC4 (razor). I have a side menu, and all I want is that another partial view will be rendered (depends on the menu item's being clicked). I have a div on my page that should contain this partial view. The command:

 @Html.Partial("_TitleDescription")

works just fine, but it's statically render the partial view (on compilation time). I want it to render it dynamically with every button the user clicked in the menu.

I tried:

 @Ajax.ActionLink("Location", "Location", "Product",  new { id = @Model.ID }, new AjaxOptions() { UpdateTargetId = "result", InsertionMode = InsertionMode.Replace, HttpMethod = "GET"})

I tried:

 <script type="text/javascript">
        function getView() {
            $('#detailsDiv').load("@Url.Action("Location" , "Product" )");
        }
 </script>
 <a href='javascript:getView();'>Get Partial View</a>
 <div id="detailsDiv"></div>

and also like this:

 <div id="detailsDiv">
     @{ Html.RenderPartial("_TitleDescription", null); }
 </div>

but nothing works for me.

EDIT:

I tried the two answers but non of them works... so here is my controller:

 public ActionResult Location(int id = 0)
    {

        Product product = unitOfWork.ProductRepository.GetById(id);

        return PartialView("Location.cshtml", product);
    }

I put a breakpoint and I'm hitting it every time, but still nothing is changing in the view... :(

This is what i tried again:

 <div id="detailsDiv"></div>
 <a href="#" onclick="loadLocation()">Location</a>

 <script type="text/javascript">
      function loadLocation() {
            $.get('@Url.Action("Location","Product", new { id = 15 } )',
                 function (data) {
                     $('#detailsDiv').load(data);
                 });
        }
 </script>

and I also tried this:

 <div id="detailsDiv"></div>
 @Html.ActionLink("Pages","Location","Product",new {id = 15},new {@class="menu"})

 <script type="text/javascript">
        $(function () {

            $(".menu").click(function (e) {

                e.preventDefault();
                $("#detailsDiv").load($(this).attr("href"))
            });


        });
    </script>

Can you check the jQuery request in the browser's JavaScript console? — Marthijn
– Marthijn, Commented Jan 14, 2014 at 15:17

Shyju · Accepted Answer · 2014-01-14 16:24:01Z

1

Try this

@Html.ActionLink("Pages","Pages","Home",new {@is=Model.ID},new {@class="menu"})
@Html.ActionLink("Posts","Posts","Home",new {@is=Model.ID},new {@class="menu"})
<div id="detailView"></div>

And have some javascript to listen to the click event on these links and use jQuery load method to load the result from the action methods.

<script type="text/javascript">
  $(function(){

    $("a.menu").click(function(e){

      e.preventDefault();
      $("#detailView").load($(this).attr("href"))

    });

  });
</script>

Assuming you have the Action methods in your HomeController which returns the relevant view/partial view.

answered Jan 14, 2014 at 16:24

Shyju

220k106 gold badges420 silver badges499 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

santosh singh · Accepted Answer · 2014-01-14 16:27:58Z

1

try this

   $.get( '@Url.Action("Location","Location", new { id = Model.ID } )',
 function(data) {
        $('#detailsDiv').html(data);
    });

answered Jan 14, 2014 at 16:27

santosh singh

28.8k27 gold badges88 silver badges134 bronze badges

Comments

Celdor · Accepted Answer · 2014-11-19 09:04:34Z

If you want to have different side menus for different (partial) views, have you considered using sections in the main Layout? this is one of the ways of sorting this kind of problems.

For instance the main _Layout.cshtml (e.g. in Shared folder would look as follows:

@{
    string result = null;
    if (IsSectionDefined("Navigation"))
    {
        result = RenderSection("Navigation", false).ToHtmlString();
    }
}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <link href="~/Content/StyleSheet.css" rel="stylesheet" type="text/css" />
    <title>@ViewBag.Title</title>
</head>
<body>
    @if (IsSectionDefined("Title"))
    {
        <header id="top">
            <h1>@RenderSection("Title")</h1>
        </header>
    }
    @if (IsSectionDefined("Navigation"))
    {
        <nav>
            @Html.Raw(result)
        </nav>
    }
    <section>
        <table>
            <tr>
                @if (IsSectionDefined("SideMenu"))
                {
                    <td>
                        <aside>
                            @RenderSection("SideMenu")
                        </aside>
                    </td>
                }
                <td>
                    <section>
                        @RenderBody()
                    </section>
                </td>
                @if (IsSectionDefined("SideMenu2"))
                {
                    <td>
                        <aside>
                            @RenderSection("SideMenu2")
                        </aside>
                    </td>
                }
            </tr>
        </table>
    </section>
    @if (IsSectionDefined("Navigation"))
    {
        <nav>
            @Html.Raw(result)
        </nav>
    }
    <footer>
        <h4>The footer of the main Layout</h4>
    </footer>
</body>
</html>

And then three different view could define sections:

Example of View 1:

@{
    ViewBag.Title = "Cieties";
}

@section Title
{
    Main cities around the World
}

@section Navigation
{
    Home | City 1 | City 2 | City 3  
}

@section SideMenu
{
    <ul>
        <li>Population</li>
        <li>Area</li>
        <li>History</li>
        <li>For turists</li>
    </ul>
}

@section SideMenu2
{
    <ul>
        <li>Additional link 1</li>
        <li>Additional link 2</li>
        <li>Additional link 3</li>
    </ul>
}

<div>
    Here goes everything about particular city
</div>

Example of View2:

@{
    ViewBag.Title = "Cars";
}

@section Title
{
    All about good cars
}

@section Navigation
{
    Home | BMW | VW | Nissan  
}

@section SideMenu
{
    <ul>
        <li>Fuel consumption</li>
        <li>Comfort</li>
        <li>Technical details</li>
        <li>Engine</li>
    </ul>
}

<div>
    Here goes everything about particular Cars
</div>

Example of View3:

@{
    ViewBag.Title = "Food";
}

@section Title
{
    Tasty food for all occasions
}

@section navigation
{
    Home | Non-vegetarians | Vegetarians | In 30 mins | Spanish Tapas  
}

@section SideMenu2
{
    <ul>
        <li>Spanish cusine</li>
        <li>Italian cusine</li>
        <li>American fast food</li>
    </ul>
}

<div>
    Here goes everything about particular food
</div>

A few sections are optional that is why I have put false as a second parameter of @RenderSection(). You would need to work out CSS for this and perhaps <nav>, <section>, <aside> as part of HTML5 would need to be changed to <div> tags but that's the minor change.

Kust a side note: you need to call @Layout = ~/Shared/_Layout.cshtml in order for MVC 4 to call this layout for all Views.

Collectives™ on Stack Overflow

How to render a partial view (using razor) after user click?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related