Partial view render on button click

netmajor picture netmajor · Aug 14, 2012 · Viewed 30.4k times · Source

I have Index view:

@using System.Web.Mvc.Html
@model  MsmqTestApp.Models.MsmqData
<!DOCTYPE html>
<html>
<head>
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
    <meta name="viewport" content="width=device-width" />
    <title>MsmqTest</title>
</head>
<body>
    <div>
        <input type="submit" id="btnBuy" value="Buy" onclick="location.href='@Url.Action("BuyItem", "MsmqTest", new { area = "Msmq" })'" />
        <input type="submit" id="btnSell" value="Sell" onclick="location.href='@Url.Action("SellItem", "MsmqTest", new { area = "Msmq" })'" />
    </div>
    <div id="msmqpartial">
    @{Html.RenderPartial("Partial1", Model); }

    </div>
</body>
</html>

and partial:

@using System.Web.Mvc.Html
@model  MsmqTestApp.Models.MsmqData

    <p>
        Items to buy
        @foreach (var item in Model.ItemsToBuy)
        { 
            <tr>
                <td>@Html.DisplayFor(model => item)
                </td>
            </tr>
        }
    </p>
    <p>
        <a>Items Selled</a>
        @foreach (var item in Model.ItemsSelled)
        { 
            <tr>
                <td>@Html.DisplayFor(model => item)
                </td>
            </tr>
        }
    </p>

And controller:

 public class MsmqTestController : Controller
    {
        public MsmqData data = new MsmqData();

        public ActionResult Index()
        {

            return View(data);
        }

        public ActionResult BuyItem()
        {
            PushIntoQueue();
            ViewBag.DataBuyCount = data.ItemsToBuy.Count;
            return PartialView("Partial1",data);
        }
}

How to do that when i Click one of button just partial view render, now controller wants to move me to BuyItem view ;/

Answer

Darin Dimitrov picture Darin Dimitrov · Aug 15, 2012

The first thing to do is to reference jQuery. Right now you have referenced only jquery.unobtrusive-ajax.min.js but this script has dependency on jQuery, so don't forget to include as well before it:

<script src="@Url.Content("~/Scripts/jquery.jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

Now to your question: you should use submit buttons with an HTML form. In your example you don't have a form so it would be semantically more correct to use a normal button:

<input type="button" value="Buy" data-url="@Url.Action("BuyItem", "MsmqTest", new { area = "Msmq" })" />
<input type="button" value="Sell" data-url="@Url.Action("SellItem", "MsmqTest", new { area = "Msmq" })" />

and then in a separate javascript file AJAXify those buttons by subscribing to the .click() event:

$(function() {
    $(':button').click(function() {
        $.ajax({
            url: $(this).data('url'),
            type: 'GET',
            cache: false,
            success: function(result) {
                $('#msmqpartial').html(result);
            }
        });
        return false;
    });
});

or if you want to rely on the Microsoft unobtrusive framework you could use AJAX actionlinks:

@Ajax.ActionLink("Buy", "BuyItem", "MsmqTest", new { area = "Msmq" }, new AjaxOptions { UpdateTargetId = "msmqpartial" })
@Ajax.ActionLink("Sell", "SellItem", "MsmqTest", new { area = "Msmq" }, new AjaxOptions { UpdateTargetId = "msmqpartial" })

and if you want buttons instead of anchors you could use AJAX forms:

@using (Ajax.BeginForm("BuyItem", "MsmqTest", new { area = "Msmq" }, new AjaxOptions { UpdateTargetId = "msmqpartial" }))
{
    <button type="submit">Buy</button>
}
@using (Ajax.BeginForm("SellItem", "MsmqTest", new { area = "Msmq" }, new AjaxOptions { UpdateTargetId = "msmqpartial" }))
{
    <button type="submit">Sell</button>
}

From what I can see you have already included the jquery.unobtrusive-ajax.min.js script to your page and this should work.