在MVC Razor View中使用javascript / AJAX？

Question

我應該將表單提交從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中，但它仍然無效。

謝謝你的幫助 ：）

Answer 1

您應該只需要在文檔准備好時在表單上調用.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
}