局部視圖渲染按鈕點擊

我有索引視圖：局部視圖渲染按鈕點擊

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

和部分：

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

和控制器：

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

怎麼做，當我點擊的一個按鈕只是局部視圖渲染，現在控制器想要將我移動到BuyItem視圖;/

來源

2012-08-14 netmajor

要做的第一件事就是引用jQuery。現在你只引用jquery.unobtrusive-ajax.min.js但這個腳本對jQuery的依賴，所以不要忘記在它之前包括還有：

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

現在你的問題：你應該使用HTML表單提交按鈕。在你的榜樣，你沒有一個形式，從而這將是語義上更正確使用普通按鈕：

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

，然後在一個單獨的JavaScript文件通過訂閱.click()事件AJAXify這些按鈕：

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

，或者如果你想依靠微軟不顯眼的框架，你可以使用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" })

，如果你想按鈕，而不是chors你可以使用AJAX形式：

@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> 
}

從我可以看到你已經包括了jquery.unobtrusive-ajax.min.js腳本您的頁面，這應該工作。

來源

2012-08-15 06:23:22

在最後一個例子你不使用UpdateTargerId，它是目的或錯誤？ – netmajor 2012-08-15 13:58:06

這是錯誤的。感謝您的注意。我會修好它。 – 2012-08-15 14:01:43

@DarinDimitrov：當使用'@ Ajax.ActionLink'時，我應該再次寫入JS代碼嗎？我也陷入了類似的情況。 – Vini 2015-10-07 05:56:40

也許不是你正在尋找的解決方案，但是我會忘記partials，並使用Javascript調用服務器來獲取所需的數據，然後將數據作爲JSON返回給客戶端，並使用它將結果呈現給異步頁面。

JavaScript函數;

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


})();

和服務器上....

public JsonResult myjsonaction(string prop) 
     { 
      var JsonResult; 

      // do whatever you need to do 

      return Json(JsonResult); 
     }

希望這有助於....

來源

2012-08-15 06:36:43 macou

局部視圖渲染按鈕點擊

回答

相關問題