通过 AJAX 发送表单数据并使用结果填充 div

Question

我想进行 AJAX 调用以提交来自“数据”div 的数据并使用结果填充结果 div。

此时，它不会在提交时调用 AJAX。如果我不想以这种方式提交，我什至应该使用 html.BeginForm() 吗？

$.ajax({
type: 'POST',
url: '@Url.Content("~/ControllerName/ActionName")',
data: ModelName,
success: function(result) {
$('#Results').data = result;
}});*@



@using (Html.BeginForm("Index", "ControllerName", FormMethod.Post))
{
  <div id="Data">

  @Html.DropDownListFor(x => x.ID, new SelectList(Model.Stuff, "ID", "Name"), "Choose")
   //more dropdown lists
  

<input name="SubmitButton" type="submit" id="Submit" value="Submit"/>

  </div>
 }


 <div id="Results">

   @Html.DisplayTextFor(x => x.Sum)

 </div>

Answer 1

https://dotnetfiddle.net/XQdmK1

控制器/视图模型

public class Stuff
{
    public int ID { get; set; }
    public string Name { get; set; }
}
public class JohnViewModel
{
    public int ID { get; set; }
    public IList<Stuff> Stuff { get; set; }
    public int Sum { get; set; }
}
public class HomeController : Controller
{
    public ActionResult Index18()
    {
        var stuff1 = new Stuff { ID = 1, Name = "Name1" };
        var stuff2 = new Stuff { ID = 2, Name = "Name2" };
        var stuff3 = new Stuff { ID = 3, Name = "Name3" };
        var viewModel = new JohnViewModel();
        viewModel.Sum = 27;
        viewModel.Stuff = new List<Stuff>();
        viewModel.Stuff.Add(stuff1);
        viewModel.Stuff.Add(stuff2);
        viewModel.Stuff.Add(stuff3);
        return View(viewModel);
    }

    [HttpPost]
    public ActionResult JohnUpdate(string myvar)
    {
        var q = myvar;
        return Json(q, JsonRequestBehavior.AllowGet);
    }

查看

@model WebApplication2.Controllers.JohnViewModel
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index18</title>
    <script src="~/Scripts/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            $("#Submit").click(function () {
                $.ajax({
                    url: '/home/JohnUpdate',
                    type: "POST",
                    //dataType: "JSON",
                    data: { myvar: $("#selector option:selected").text() },
                    success: function (data) {
                        $("#Results").text(data);
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        alert(xhr.status);
                        alert(thrownError);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <div id="Data">
        @Html.DropDownListFor(x => x.ID, new SelectList(Model.Stuff, "ID", "Name"), "Choose", new { id = "selector" })
        @*more dropdown lists*@
        <input name="SubmitButton" type="button" id="Submit" value="Submit" />
    </div>
    <div id="Results">
        @Html.DisplayTextFor(x => x.Sum)
    </div>
</body>
</html>