javascript - How to submit a form inside Razor view by Java Script function WITHOUT redirection? - Stack Overflow

admin管理员组

文章数量:1022761

To submit form below I have to click <input type="submit" value="Save" /> which is at the bottom of form pasted below:

@model WebApplication2.Models.Person

@using (Html.BeginForm()) {
    @Html.AntiForgeryToken()    
    <div class="form-horizontal">

        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.Id)

        <div class="form-group">
            @Html.LabelFor(model => model.FirstName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-0 col-md-10">
                <input type="submit" value="Save" class="btn btn-success" style="width: 200px; font-weight: bold;" />
            </div>
        </div>
    </div>
}

This causes invoking POST Edit method in PersonController:

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit([Bind(Include = "Id,FirstName")] Person person) {     
    if (ModelState.IsValid) {
        db.Entry(person).State = EntityState.Modified;
        db.SaveChanges();
        return RedirectToAction("Index");
    }
    return View(person);
}

I also would like to have a JavaScript function which does the same( when I invoke this function) but does not redirects me to any view. Just invokes POST Edit and passes contents of the form above.

Question: How to write JavaScript function which submits the form above without redirecting me anywhere?

 function SubmitForm() {}

---

EDIT

I tried this.

The JavaScript method is invoked when I click @Html.ActionLink("Add a Report", "Create", "Reports", new { personId = Model.Id }, new { onclick = "SubmitForm()" }) (alert is displayed) but form is not submited(standard submit button works, so it is JavaScript function fault).

Form:

@using (Html.BeginForm(null, null, FormMethod.Post, new { name="myForm", id = "myForm" })) {
    @Html.AntiForgeryToken()

    <div class="form-horizontal">

        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.Id)

        <div class="form-group">
            @Html.LabelFor(model => model.FirstName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
            </div>
        </div>

        <p> @Html.ActionLink("Add a Report", "Create", "Reports", new { personId = Model.Id }, new { onclick = "SubmitForm()" })</p>


        <div class="form-group">
            <div class="col-md-offset-0 col-md-10">
                <input type="submit" value="Save" class="btn btn-success" style="width: 200px; font-weight: bold;" />
            </div>
        </div>
    </div>
}

and the function:

 function SubmitForm() {
            alert("IS INVOKED");
            $("#myForm").submit();
        }

To submit form below I have to click <input type="submit" value="Save" /> which is at the bottom of form pasted below:

@model WebApplication2.Models.Person

@using (Html.BeginForm()) {
    @Html.AntiForgeryToken()    
    <div class="form-horizontal">

        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.Id)

        <div class="form-group">
            @Html.LabelFor(model => model.FirstName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-0 col-md-10">
                <input type="submit" value="Save" class="btn btn-success" style="width: 200px; font-weight: bold;" />
            </div>
        </div>
    </div>
}

This causes invoking POST Edit method in PersonController:

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit([Bind(Include = "Id,FirstName")] Person person) {     
    if (ModelState.IsValid) {
        db.Entry(person).State = EntityState.Modified;
        db.SaveChanges();
        return RedirectToAction("Index");
    }
    return View(person);
}

I also would like to have a JavaScript function which does the same( when I invoke this function) but does not redirects me to any view. Just invokes POST Edit and passes contents of the form above.

Question: How to write JavaScript function which submits the form above without redirecting me anywhere?

 function SubmitForm() {}

---

EDIT

I tried this.

The JavaScript method is invoked when I click @Html.ActionLink("Add a Report", "Create", "Reports", new { personId = Model.Id }, new { onclick = "SubmitForm()" }) (alert is displayed) but form is not submited(standard submit button works, so it is JavaScript function fault).

Form:

@using (Html.BeginForm(null, null, FormMethod.Post, new { name="myForm", id = "myForm" })) {
    @Html.AntiForgeryToken()

    <div class="form-horizontal">

        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.Id)

        <div class="form-group">
            @Html.LabelFor(model => model.FirstName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
            </div>
        </div>

        <p> @Html.ActionLink("Add a Report", "Create", "Reports", new { personId = Model.Id }, new { onclick = "SubmitForm()" })</p>


        <div class="form-group">
            <div class="col-md-offset-0 col-md-10">
                <input type="submit" value="Save" class="btn btn-success" style="width: 200px; font-weight: bold;" />
            </div>
        </div>
    </div>
}

and the function:

 function SubmitForm() {
            alert("IS INVOKED");
            $("#myForm").submit();
        }

• javascript
• asp-mvc
• forms
• razor

Share Improve this question Follow edited Sep 22, 2014 at 21:36 Yoda asked Sep 22, 2014 at 20:30 YodaYoda 18.1k7272 gold badges216216 silver badges368368 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Easiest way I have found. :

$("#myForm").submit();

Possible duplicate of. :

ASP.Net MVC, Submit a form using javascript

You also need to name your form. In this instance myFrom is the id of your form. Something like. :

Html.BeginForm(null, null, FormMethod.Get, new { name = "myForm", id = "myForm" })

To submit form below I have to click <input type="submit" value="Save" /> which is at the bottom of form pasted below:

@model WebApplication2.Models.Person

@using (Html.BeginForm()) {
    @Html.AntiForgeryToken()    
    <div class="form-horizontal">

        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.Id)

        <div class="form-group">
            @Html.LabelFor(model => model.FirstName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-0 col-md-10">
                <input type="submit" value="Save" class="btn btn-success" style="width: 200px; font-weight: bold;" />
            </div>
        </div>
    </div>
}

This causes invoking POST Edit method in PersonController:

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit([Bind(Include = "Id,FirstName")] Person person) {     
    if (ModelState.IsValid) {
        db.Entry(person).State = EntityState.Modified;
        db.SaveChanges();
        return RedirectToAction("Index");
    }
    return View(person);
}

I also would like to have a JavaScript function which does the same( when I invoke this function) but does not redirects me to any view. Just invokes POST Edit and passes contents of the form above.

Question: How to write JavaScript function which submits the form above without redirecting me anywhere?

 function SubmitForm() {}

---

EDIT

I tried this.

The JavaScript method is invoked when I click @Html.ActionLink("Add a Report", "Create", "Reports", new { personId = Model.Id }, new { onclick = "SubmitForm()" }) (alert is displayed) but form is not submited(standard submit button works, so it is JavaScript function fault).

Form:

@using (Html.BeginForm(null, null, FormMethod.Post, new { name="myForm", id = "myForm" })) {
    @Html.AntiForgeryToken()

    <div class="form-horizontal">

        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.Id)

        <div class="form-group">
            @Html.LabelFor(model => model.FirstName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
            </div>
        </div>

        <p> @Html.ActionLink("Add a Report", "Create", "Reports", new { personId = Model.Id }, new { onclick = "SubmitForm()" })</p>


        <div class="form-group">
            <div class="col-md-offset-0 col-md-10">
                <input type="submit" value="Save" class="btn btn-success" style="width: 200px; font-weight: bold;" />
            </div>
        </div>
    </div>
}

and the function:

 function SubmitForm() {
            alert("IS INVOKED");
            $("#myForm").submit();
        }

To submit form below I have to click <input type="submit" value="Save" /> which is at the bottom of form pasted below:

@model WebApplication2.Models.Person

@using (Html.BeginForm()) {
    @Html.AntiForgeryToken()    
    <div class="form-horizontal">

        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.Id)

        <div class="form-group">
            @Html.LabelFor(model => model.FirstName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-0 col-md-10">
                <input type="submit" value="Save" class="btn btn-success" style="width: 200px; font-weight: bold;" />
            </div>
        </div>
    </div>
}

This causes invoking POST Edit method in PersonController:

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit([Bind(Include = "Id,FirstName")] Person person) {     
    if (ModelState.IsValid) {
        db.Entry(person).State = EntityState.Modified;
        db.SaveChanges();
        return RedirectToAction("Index");
    }
    return View(person);
}

I also would like to have a JavaScript function which does the same( when I invoke this function) but does not redirects me to any view. Just invokes POST Edit and passes contents of the form above.

Question: How to write JavaScript function which submits the form above without redirecting me anywhere?

 function SubmitForm() {}

---

EDIT

I tried this.

The JavaScript method is invoked when I click @Html.ActionLink("Add a Report", "Create", "Reports", new { personId = Model.Id }, new { onclick = "SubmitForm()" }) (alert is displayed) but form is not submited(standard submit button works, so it is JavaScript function fault).

Form:

@using (Html.BeginForm(null, null, FormMethod.Post, new { name="myForm", id = "myForm" })) {
    @Html.AntiForgeryToken()

    <div class="form-horizontal">

        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.Id)

        <div class="form-group">
            @Html.LabelFor(model => model.FirstName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
            </div>
        </div>

        <p> @Html.ActionLink("Add a Report", "Create", "Reports", new { personId = Model.Id }, new { onclick = "SubmitForm()" })</p>


        <div class="form-group">
            <div class="col-md-offset-0 col-md-10">
                <input type="submit" value="Save" class="btn btn-success" style="width: 200px; font-weight: bold;" />
            </div>
        </div>
    </div>
}

and the function:

 function SubmitForm() {
            alert("IS INVOKED");
            $("#myForm").submit();
        }

• javascript
• asp-mvc
• forms
• razor

Share Improve this question Follow edited Sep 22, 2014 at 21:36 Yoda asked Sep 22, 2014 at 20:30 YodaYoda 18.1k7272 gold badges216216 silver badges368368 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Easiest way I have found. :

$("#myForm").submit();

Possible duplicate of. :

ASP.Net MVC, Submit a form using javascript

You also need to name your form. In this instance myFrom is the id of your form. Something like. :

Html.BeginForm(null, null, FormMethod.Get, new { name = "myForm", id = "myForm" })

本文标签： javascriptHow to submit a form inside Razor view by Java Script function WITHOUT redirectionStack Overflow