Partial view render on button click

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 ;/

标签： asp.net asp.net-mvc partial-views

2条回答

Rolldiameter

2楼-- · 2019-01-24 06:35

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.

0人赞添加讨论(0) 举报

狗以群分

3楼-- · 2019-01-24 06:50

Maybe not the solution you were looking for but, I would forget about partials and use Javascript to call the server to get the data required and then return the data to the client as JSON and use it to render the results to the page asynchronously.

The JavaScript function;

var MyName = (function () {


//PRIVATE FUNCTIONS
var renderHtml = function(data){
   $.map(data, function (item) {
       $("<td>" + item.whateveritisyoureturn + "</td>").appendTo("#msmqpartial");
   });
};

//PUBLIC FUNCTIONS
var getData = function(val){
   // call the server method to get some results.
    $.ajax({ type: "POST",
        url: "/mycontroller/myjsonaction",
        dataType: "json",
        data: { prop: val },
        success: function (data) {
            renderHtml();
        },
        error: function () {
        },
        complete: function () {
        }
    });
};

//EXPOSED PROPERTIES AND FUNCTIONS
return {
    GetData : getData
};


})();

And on the Server....

public JsonResult myjsonaction(string prop)
        {
            var JsonResult;

            // do whatever you need to do

            return Json(JsonResult);
        }

hope this helps....

0人赞添加讨论(0) 举报

Partial view render on button click

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间