局部视图渲染按钮点击

我有索引视图：局部视图渲染按钮点击

@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

局部视图渲染按钮点击

回答

相关问题