将带有 Ajax 的表单提交到 ActionController

Question

我正在尝试向我的帐户管理员提交表格。我收到以下错误：我找遍了所有地方，似乎找不到解决方案。

1

$ 和 JQuery 未定义。

2

服务器响应 404 错误（我确定与 #1 相关）

注意：我了解我的控制器目前未设置为处理请求。我需要帮助的是尝试将请求传递到服务器。

提前感谢 Stack 的帮助！

查看：

    <reference path="jquery.min.js" />
<reference path="kendo.all.min.js" />
          @{
            ViewBag.Title = "Register";
            }
      
    @section styles {
    <link href="@Url.Content("~/Content/Views/Form.css")" rel="stylesheet" type="text/css" />
}


<script type="text/javascript">
    $('#"ButtonSubmitForm"').click(function () {
        submit();
    }
    );



</script>


<div class="middle-center">
    <div class="form-center">
        @{
            Html.Kendo().Window()
        .Name("registerForm")
        .Title("UserProfileWndw")
        .Draggable()
        .Width(500)
        .Actions(actions => { })
        .Iframe(true)
        .Content(
        @<text>
            @using (Html.BeginForm())
            {
                @Html.AntiForgeryToken()
                @Html.ValidationSummary()

    <fieldset>
        <legend>Registration Form</legend>
        <ol>
            <li>
                @Html.LabelFor(m => m.UserName)
                @Html.TextBoxFor(m => m.UserName)
            </li>
            <li>
                @Html.LabelFor(m => m.Password)
                @Html.PasswordFor(m => m.Password)
            </li>
            <li>
                @Html.LabelFor(m => m.ConfirmPassword)
                @Html.PasswordFor(m => m.ConfirmPassword)
            </li>
            <li>
                @Html.LabelFor(m => m.EmailAddress)
                @Html.TextBoxFor(m => m.EmailAddress)


            </li>
            <li>
                @Html.LabelFor(m => m.OrganizationId)
                @Html.DropDownListFor(m => m.OrganizationId, new SelectList(ViewBag.Organizations, "OrganizationId", "Name"), string.Empty)
            </li>

        </ol>
        <input type="submit" id="ButtonSubmitForm"  value="Add user" class="k-button" />
        <!-- clear button-->
        <!-- cancel button-->
    </fieldset>
            }
        </text>
).Render();
        }
    </div>
</div>
     
    
    function submit() {
    
    
        $(document).ready(function(){
        
            var form = $("#registerForm");
           
            $.ajax({
                cache: false,
                async: true,
                type: "POST",
                url: "Account/AdminReg/",
                data: form.serialize(),
                success: function (data) {
                    alert(data);
                }
            });




        }
            )
        }
    

    </script>

控制器：

 public ActionResult AdminReg(Register model)
    {
        if (ModelState.IsValid)
        {
            // Attempt to register the user
            try
            {
               

                WebSecurity.CreateUserAndAccount(model.UserName, model.Password, new { Organization_OrganizationId = model.OrganizationId, IsApproved = false, EmailAddress = model.EmailAddress }, true);

                // add user to org user group if specified
                Organization org = db.Organizations.Include("Groups").Include("Groups.Members").SingleOrDefault(o => o.OrganizationId == model.OrganizationId);
                if (org != null)
                {
                    UserProfile newUser = db.UserProfiles.Single(u => u.UserName == model.UserName);
                    org.Groups.Single(g => g.Name == "Users").Members.Add(newUser);
                    db.SaveChanges();

                }

                if (User.IsInRole("Admin") || User.IsInRole("Administrators"))
                {
                    return RedirectToAction("ReadUsers", "UserManagement");
                }



                //WebSecurity.Login(model.UserName, model.Password);
                return RedirectToAction("RegistrationSuccessful", "Account");
            }
            catch (MembershipCreateUserException e)
            {
                ModelState.AddModelError("", ErrorCodeToString(e.StatusCode));
            }
        }

        return PartialView("UserAddAdminTemplate");
    }

Answer 1

您似乎没有正确包含 jquery。相反，参考尝试包含在您的视图中：

<script src="~/Scripts/jquery.min.js"></script>

其中“~/Scripts/jquery.min.js”是 jquery 库的路径。

Answer 2

查看您的 bundleconfig 并检查那里是否引用了 Jquery。这是一个例子：

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.unobtrusive*",
                    "~/Scripts/jquery.validate*",
                    ));

还要检查您的默认共享布局页面并确保它们已呈现（尝试 post 在页面末尾呈现它们）这是一个例子：

    @Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")

Answer 3

您没有包含 jquery 文件（<reference path="jquery.min.js" /> 不够）。按照 Osadellah 的回答，使用 @Scripts.Render("~/bundles/jquery") 添加它们。

然后将 $('#ButtonSubmitForm').click(function () { ...}); 移动到页面底部（或包裹在 $(document).ready() 中），因为在您当前呈现脚本时该按钮不存在。

最后，总是使用 UrlHelper 构建您的 url（您缺少 url 中的前导 /）。

  @Scripts.Render("~/bundles/jquery") // or <script src="~/Scripts/jquery-1.9.1.js"></script> 
  <script type="text/javascript"> // immediately before the closing body tag
    var form = $("#registerForm");
    var url = '@Url.Action("AdminReg", "Account");
    $('#ButtonSubmitForm').click(function() {
      $.post(url, form.serialize(), function(data) {
        alert(data);
      });
    });
  </script>
</body>

将带有 Ajax 的表单提交到 ActionController

Submit form with Ajax to ActionController

c#

asp.net-mvc

kendo-asp.net-mvc

1

2