在MVC Razor视图中使用javascript/AJAX

本文关键字：javascript AJAX MVC Razor 视图 | 更新日期: 2023-09-27 18:15:37

我应该将表单提交从MVC Razor提交转换为Ajax提交，但我甚至在表单视图(Add.cshtml)中使用简单的javascript函数也有问题。

对于初学者，我尝试以以下方式链接我想要使用的JS文件:

@section JavaScript
{
   <script type="text/javascript" src="@Url.Content("/Scripts/ajax_submit.js")"></script>
}

javascript文件看起来像这样:

function dosubmit() {
    $("#add_address").ajaxForm({ url: '~/Home/Add', type: 'post' })
    alert("IT WORKS");
    return false;// if it's a link to prevent post
}

和我有我的形式建立如下方式:

@model MvcApplicationTest.Models.PersonModel
@section JavaScript
{
   <script type="text/javascript" src="@Url.Content("/Scripts/ajax_submit.js")"></script>
}
@{
    ViewBag.Title = "Hinzufügen";
}

<h2>Hinzufügen</h2>

<form id="add_address">
    <div class="fieldrow">
        @Html.LabelFor(x => x.Nachname)
        @Html.TextBoxFor(x => x.Nachname)
        @Html.ValidationMessageFor(x => x.Nachname)
    </div>
    <div class="fieldrow">
        @Html.LabelFor(x => x.Vorname)
        @Html.TextBoxFor(x => x.Vorname)
        @Html.ValidationMessageFor(x => x.Vorname)
    </div>
    <div class="fieldrow">
        @Html.LabelFor(x => x.Strasse)
        @Html.TextBoxFor(x => x.Strasse)
        @Html.ValidationMessageFor(x => x.Strasse)
    </div>
    <div class="fieldrow">
        @Html.LabelFor(x => x.Hausnummer)
        @Html.TextBoxFor(x => x.Hausnummer)
        @Html.ValidationMessageFor(x => x.Hausnummer)
    </div>
    <div class="fieldrow">
        @Html.LabelFor(x => x.Plz)
        @Html.TextBoxFor(x => x.Plz)
        @Html.ValidationMessageFor(x => x.Plz)
    </div>
    <div class="fieldrow">
        @Html.LabelFor(x => x.Ort)
        @Html.TextBoxFor(x => x.Ort)
        @Html.ValidationMessageFor(x => x.Ort)
    </div>
    <!--Martin-->
    <div class="fieldrow">
        @Html.LabelFor(x => x.Email) 
        @Html.TextBoxFor(x => x.Email)
        @Html.ValidationMessageFor(x => x.Email)
    </div>
    <input type="button" onclick="dosubmit()" value="Speichern"  />
</form>

然而，当我点击按钮什么也没有发生(它应该弹出一个窗口，所需的文本)。

我已经尝试将JS文件包含到_Layout中。Cshtml，但仍然不能工作

谢谢你的帮助

在MVC Razor视图中使用javascript/AJAX

当文档准备好时，您只需要在表单本身上调用.ajaxForm。.ajaxForm本身只是为ajax提交准备表单，所以当提交按钮被按下时，已经太迟了。

我将从submit按钮中删除提交处理程序(我也将在这里使用submit类型的input):

<input type="submit" value="Speichern"  />

，并添加以下内容:

$(function () {
    $("#add_address").ajaxForm({ 
        url: '~/Home/Add', 
        beforeSubmit: function () {
            alert('about to submit');
        },
        type: 'post' 
    });
});

或者你可以使用.ajaxSubmit代替.ajaxForm:

function dosubmit() {
    $("#add_address").ajaxSubmit({ url: '~/Home/Add', type: 'post' });
    alert("IT WORKS");
    return false;// if it's a link to prevent post
}
相关文章：