当从AJAX调用主要操作时，RedirectToAction不起作用

在ASP.NET MVC Core 1.1应用程序中，跟随OrdersMain View显示一个输入标签以添加一个订单，该标签下方显示所有现有订单的标签。视图上的Add Order按钮调用以下操作方法AddOrder(...)，它首先将订单添加到数据库，然后应该重定向到OrdersMain(...)操作。但重定向部分不起作用。订单已成功添加到数据库中。但是OrdersMain视图未刷新，因此添加订单后，新添加的订单未显示在OrdersMain视图中。问题：此处可能缺少的内容以及添加订单后如何使新订单显示在OrdersMain视图中？注意：我知道以上可以通过使用Form和HttpPost来实现。但我感兴趣的是使用AJAX通话和HttpGet当从AJAX调用主要操作时，RedirectToAction不起作用

OrdersMain.cshtml查看达到相同的：从动作OrdersMain调用]

@model MyProj.Models.MyViewModel 
... 
... 
Add Order: <input ....../> 
... 
List of Existing Orders: 
<div>...</div> 
... 
@section scripts 
{ 
    <script> 
    $(document).ready(function() { 

$('.Addbtn').click(function() { 

    var newOrdVal = $('.txtAddRec').val(); 

      $.ajax({ 
     url: '@Url.Action("AddOrder", "ContrlName")', 
       data: { sNewOrdVal: newOrdVal }, 
       contentType: 'application/json', 
       type: 'GET', 
       success: function(obj) { 
      alert('Suceeded'); 
     }, 
       error: function(obj) { 
      alert('Error occurred'); 
     } 
    }); 
}); 


    }); 
    </script> 
}

控制器：

[HttpGet] 
public async Task<IActionResult> AddOrder(string sNewVal) 
{ 

    if (ModelState.IsValid) 
    { 
     try 
     { 
      ProdOrder oRac = new ProdOrder { orderName = sNewVal }; 

      if (oRec != null) 
      { 
       _context.ProdOrder.Add(oRec); 
       await _context.SaveChangesAsync(); 
      } 
      return RedirectToAction("OrdersMain"); //this should reload the page and will display the new value on the list of orders on the page 
     } 
     catch 
     { 
      return NotFound(); 
     } 
    } 

    return RedirectToAction("OrdersMain"); 
}

来源

2017-10-13 nam

当你有一个Ajax表单提交时返回一个重定向响应是没有意义的。重定向响应（302响应）在进行正常表单提交时很有用。

我还建议让您的操作方法成为Httppost操作。任何更新数据的方法都应该是POST。

解决页面刷新问题的方法很少。

1.请在上市的部分页面更新时，AJAX调用完成

在这种方法中，你UDPATE对于已经在页面的项目列表中的标记，以便它反映了新的数据集。你可以用多种方式来做到这一点。一个是简单地做一个Ajax调用来获取所有项目的html标记，并更新容纳项目列表的容器。另一种选择是让您的操作方法返回新单个项目所需的标记，并使用jQuery append()方法将其追加到现有列表中。

下面的示例返回一个JSON响应，其中包含保存的新项目的Id，我们将进行另一个Ajax调用以获取该项目。

$(document).ready(function() { 

    $('.Addbtn').click(function (e) { 

     e.preventDefault(); 
     var newOrdVal = $('.txtAddRec').val(); 

     $.ajax({ 
      url: '@Url.Action("AddOrder", "Home")', 
      data: { sNewVal: newOrdVal }, 
      type:'POST' 
     }).done(function(res) { 
       if (res.status === "success") { 
       $.get("@Url.Action("GetItem")?id=" + res.newItemId, function(newItem) { 
        $("#listContainer").append(newItem); 
       }); 
       } 
     }).fail(function(a, b, c) { 
     console.log('ajax call failed'); 
     }); 

    }); 

});

假设你AddOrder操作方法返回的新项目ID的JSON响应，你有一个获取GetItem这需要操作ID，并返回需要在列表中选择新项目的标记。

[HttpPost] 
public async Task<IActionResult> AddOrder(string sNewVal) 
{ 
    ProdOrder oRac = new ProdOrder { orderName = sNewVal }; 
    _context.ProdOrder.Add(oRec); 
    await _context.SaveChangesAsync(); 
    return Json(new {status = "success", newItemId = oRec.Id}); 
} 
public ActionResult GetItem(int id) 
{ 
    var t=db.ProdOrder.Find(id); 
    //I am simply returning the orderName wrapped in p tag. 
    // You may change this to call a Partial view 
    // which returns the markup for the single item 
    return Content("<p>" + t.orderName + "</p>"); 
}

2.重新加载页面

您可以在Ajax调用成功处理程序使用JavaScript加载页面。

$.ajax({ 
    // your ajax params 
}).done(function(res){ 
    window.location.href = window.location.href; 

}).fail(function(a, b, c) { 
    console.log('ajax call failed'); 
});

我不喜欢重新加载页面。因为这完全打败了我使用ajax表单的目的。

如果您使用像angular这样的前端MV *框架，则只需删除用于呈现列表中项目的数据源（可能是数组）的项目。

来源

2017-10-13 20:30:40 Shyju

我同意你的建议，因为用户可以立即看到他/她的更改：任何更新数据的方法都应该是POST。 – nam

您不能将ajax post或ajax get移动到新的view。当您使用ajax时，view被放置在Obj中。要做到这一点，你需要submit或Re location你的页面。在这种情况下，重定向的做法是正确完成的

来源

2017-10-13 20:32:20

当从AJAX调用主要操作时，RedirectToAction不起作用

回答

相关问题