使用Ajax向ActionController提交表单

时间:2015-02-20 15:06:51

标签: c# asp.net-mvc kendo-asp.net-mvc

我试图将表单提交给我的帐户控制器。我收到了以下错误:我到处寻找,似乎无法找到解决方案。

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");
    }

3 个答案:

答案 0 :(得分:1)

您尚未包含jquery文件(<reference path="jquery.min.js" />是不够的)。使用@Scripts.Render("~/bundles/jquery")添加它们,如Osadellah'回答中所示。

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

最后,始终使用UrlHelper构建您的网址(您错过了网址中的前导/)。

  @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>

答案 1 :(得分:0)

看起来你没有正确地包含jquery。相反,参考尝试包含在您的视图中:

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

其中&#34;〜/ Scripts / jquery.min.js&#34;是jquery库的路径。

答案 2 :(得分:0)

查看你的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*",
                    ));

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

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