在 MVC 中使用 Ajax

本文关键字：Ajax MVC | 更新日期: 2023-09-27 18:30:37

我正在尝试使用 Ajax 注入视图，但它不太有效。我对阿贾克斯一无所知，但我正在努力学习。我在这里错过了什么，或者我这样做的方式完全错了。

    foreach(ect...) {
   <tr>
       <td>
      <a href="#" onclick="AjaxStoryClick(@item.Id)" style="color:dodgerblue; font-weight: bold">@item.Name</a>
       <script type="text/javascript">
function AjaxStoryClick(storyid) {
    $.ajax({
        url: '@Url.Action("UserStoriesList", "Estimate")',
        type: 'POST',
        data: storyid,
        success: function(result){
            $('#stories').html(result);
        }
     });         
}    
      </script>

控制器： 

       public ActionResult UserStoriesList(int id)
    {
        ActiveEpicId = id;
        var userstories = userRepository.Select().Where(x => x.EpicId.Equals(id)).ToList();
        return PartialView("UserStoriesList",userstories);
    }

在 MVC 中使用 Ajax

UserStoriesList 操作方法是否为 HttpPost 类型？您的 Ajax 请求类型为 POST 。因此，它将仅由HttpPost类型的UserStoriesList操作方法处理。

 [HttpPost]
 public ActionResult UserStoriesList(int id)
 {
   // your code goes here
 }

如果你的ActionMethod不是HttpPost类型（这意味着它是HttpGet类型），你可以使用jquery get ajax调用来获取数据。

确保 ajax 调用中的参数名称与操作方法中的参数名称相同。

function AjaxStoryClick(storyid) {
  $.get('@Url.Action("UserStoriesList", "Estimate")',{id : storyid},function(result){
     $('#stories').html(result);
  });
}

}

Ajax 调用没有将参数 'Id' 的值传递给操作方法'UserStoriesList'，行'data： storyid'，应该是'data： { id：storyid}，'

由于您的操作方法"UserStoriesList"具有不可为空的 id 参数，服务器将生成错误响应：

如果没有回调，您将不会看到错误响应AJAX 错误事件，在调试模式下，不会命中操作中的断点。

这是更新的脚本： 

<script type="text/javascript">
function AjaxStoryClick(storyid) {
 $.ajax({
    url: '@Url.Action("UserStoriesList", "Estimate")',
    type: 'POST',
    data: { id: storyid },
    success: function (result) {
        $('#stories').html(result);
    },
    error: function (xhr) {
        alert("Error: " + xhr.responseText);
    }
 });
}
</script>

操作方法：

public ActionResult UserStoriesList(int id)
{
  ActiveEpicId = id;
  var userstories = userRepository.Select().Where(x => x.EpicId.Equals(id)).ToList();
  if (Request.IsAjaxRequest())
    return PartialView("_UserStoriesList", userstories);
  else
    return View("UserStoriesList", userstories);
}
相关文章：