Asp.Net MVC 4，表单提交不起作用

Question

I have a simple Asp.Net MVC 4 Chat application. Below the chat session is initialized, I ask the user to enter the name and once the user enters his name (and other details not shown in below code) and presses on the "Start Chat" button, the Action method ChatForm is called from the Chat controller.

Code snippet for the chat form is as shown below:

@model WebSite.ViewModel.SimpleForm

using (Html.BeginForm("ChatForm", "Chat", FormMethod.Post, new { id = "anonymousChat" }))
{
<div class='form-group'>
    @Html.LabelRequiredFor(m => m.Name)
    @Html.TextBoxFor(m => m.Name, new { @class = "form-control" })
</div>
<input type="submit" class='btn btn-block start-anonymous-chat' value="Start Chat" />
}

The ChatForm method is as shown below:

public ActionResult ChatForm(SimpleForm model)
{
      /*Some processing is done here and finally the below values are returned*/

      return Json(new { success = true, chatId=chatRequest.Id, compId=company.Id });
}

Now the problem is after executing this function, i get the below line on the browser:

{"success":true,"chatId":10734,"compId":109}

The method executed on click of the submit button is:

$("#anonymousChat").submit(function () {
            debugger;
            if ($("#anonymousChat").valid())
                $.ajax({
                    type: this.method,
                    url: this.action,
                    data: $(this).serialize(),
                    success: function (data) {

                        if (data.success) {
                            /*show the chat modal*/
                            chatModal.modal("show");

                        }
                        else {
                            console.log("failed");
                            $("#anon-chat-form").html(data);
                        }
                    }
                });

            return false;
        });

Also if i try to put any alert message or console messages within the method $("#anonymousChat").submit , then neither the alter is popped-up nor the console messages or being printed.

Has anyone been hit by similar problem before? Is so how did you solve it?

Thanks in advance.

Answer 1

The alert is not showing up, so the submit event is not triggered.

If your form is dynamically added to the DOM then the $("#anonymousChat").submit(function () {} won't trigger anything because the form does not exist yet when the page loads. Try changing your code like this to avoid this problem:

$(document).on('submit', '#anonymousChat', function (e) {
  debugger;
        if ($("#anonymousChat").valid())
            $.ajax({
                type: this.method,
                url: this.action,
                data: $(this).serialize(),
                success: function (data) {

                    if (data.success) {
                        /*show the chat modal*/
                        chatModal.modal("show");

                    }
                    else {
                        console.log("failed");
                        $("#anon-chat-form").html(data);
                    }
                }
            });

        return false;
});

If it stil does not work maybe your problem is much simpler than that, maybe you just didn't reference the javascript file.

Answer 2

您的表单ID为“ myChat”，但是您在JavaScript中引用的是“ anonymousChat”，请相信这可能会导致您的问题