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

编程问答 2022-06-11

问题描述

我想进行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>

解决方法

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>
ajaxasp.net-mvcjquery