Question

iv阅读了几篇关于ajax调用的帖子，我仍然感到困惑。

我的HomeControler有方法

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){

var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
today = yyyy + '.' + mm + '.' + dd;
var url = "http://www.lwcb.ca/pdf/WinnipegRiverManitobaGraph" + today + ".pdf";

$("a#url").attr("href", url)
});
</script>
</head>
<body>


<a href="a" id="url">Link to my pdf</a>
<a href="www.google.com" id="blabla">Link to google</a>

我想调用index.cshtml发布它

我的观点是这样的

public async Task<ActionResult> Index(string srchterm)
public async Task Publish(TrendVM trendVm)

是否会生成请求的razer助手？

Answer 1

推荐方法

如果您要打印的每个趋势项都有唯一的记录ID，则应使用该ID通过ajx将其传回服务器。

foreach (var trend in @Model)
{
   Html.RenderPartial("_Trend",trend);

   @Html.ActionLink("Publish","Publish","Home",new { id=trend.Id},
                                                 new { @class="publishLink"}) 


}

基本上，上面的代码将为每个趋势项

呈现这样的锚标记

<a href="Home/Publish/450">Publish</a>

其中 450 将替换为趋势项的实际唯一ID。单击该链接通常会在新页面中打开该URL。我不认为你希望在这里发生这种情况。因此，我们将覆盖默认的单击行为并对服务器进行ajax调用。

将此脚本添加到您的页面

@section Scripts
{
  <script>
     $(function(){
         $("a.publishLink").click(function(e){

            e.preventDefault();
            var url=$(this).attr("href");

            $.post(url,function(response){
              alert("Publish completed");
            });

         });
     });
 </script>    
}

现在我们需要确保我们的发布方法接受一个id并进行处理。因此，将Publish方法更改为/创建新方法（并在Html.ActionLink调用中的早期标记中使用该方法名称）

public async Task Publish(int id)
{
  // using the Id value, do some processing.
}

但是如果您不想更改Publish方法签名，那么您应该做的是在foreach循环中创建一个表单并序列化表单并发送它。您需要在输入表单字段中保留要发送的数据。我们现在将把它们留在隐藏的领域。

foreach (var trend in @Model)
{
   Html.RenderPartial("_Trend",trend);
   using(Html.BeginForm("Publish","Home"))
   {
     @Html.HiddenFor(s=>s.Name)
     @Html.HiddenFor(s=>s.TrendCode)

     @Html.ActionLink("Publish","Publish","Home",new { id=trend.Id},
                                                 new { @class="publishLink"})
   }

}

假设Name和TrendCode是TrendVM的2个属性。并且javascript将是

@section Scripts
{
  <script>
     $(function(){
         $("a.publishLink").click(function(e){

            e.preventDefault();
            var _f=$(this).closest("form");

            $.post(_f.attr("action"),_f.serialize(),function(response){
              alert("Publish completed");
            });

         });
     });
 </script>    
}

Answer 2

你应该写一些js代码。并使用$.ajax()函数。在您的视图上放置一个按钮：

<button id="your-submit-button" type="submit">Ajax call</button>

将空div放在您将放置PartialView的页面的某处：

<div id="your-partial-view-container"></div>

然后在页面上放置一些jquery（你也可以使用普通的旧js，但使用jquery更容易）。最好将所有js代码放在@section script {}中定义的_Layout中：

$(document).ready(function() {
    $("#your-submit-button").click(function(){
           $.ajax({
                url: @Url.Action("Publish","Home"), //here you put your controller adress
                type: "POST",
                dataType: 'html',
                data: $("#your-form-with-model-data-id").serialize(), //that's how you get data from your form to send your TrendVM to controller 
                success: function(data) {
                    $("#your-partial-view-container").html(data);
                }  
           });
    }); 
});

现在，当您点击按钮时，您的js代码应该是呼叫控制器，并且响应将添加到div内。

MVC5简单的ajax请求卡住了

2 个答案: