Ajax調用的形式提交無需刷新頁面MVC5

我需要從MVC視圖wihtout清爽頁面提交表單的一些幫助，但它appers我波紋管Ajax代碼是不工作： //這裏是Ajax調用Ajax調用的形式提交無需刷新頁面MVC5

function AjaxCallAndShowMessage(btnClick) { 

$('form').submit(function() { 
     $.ajax({ 
      url: this.action, 
      type: this.method, 
      data: $(this).serialize(), 
      success: function (result) { 
       ShowTimeChangeMessage(); // show an alert message 
      } 
     }); 

    return false; 
});

}

//這裏我不是爲選定的項目，這是我喜歡從dropDownkist「時刻設定」，在控制器到達獲取數據視圖

<div id="dialog" title=""> 
    @using (Html.BeginForm("Administration", "Home", FormMethod.Post, new { enctype = "multipart/form-data"})) 
    { 
     @Html.DropDownList("SeTime", new List<SelectListItem> 
    { 
     new SelectListItem{ Text="1 Min", Value = "60" }, 
     new SelectListItem{ Text="2 Min", Value = "120" }, 
     new SelectListItem{ Text="3 Min", Value = "180" }, 
    }, "Select Time") 
     <input type="submit" value="Set Time " 
     onclick="AjaxCallAndShowMessage(this)" /> 
    } 
</div>

。對於這種觀點，我可以得到一些幫助讓Ajax調用適當嗎？由於

來源

2017-06-19 Zahir

你面臨什麼錯誤！ –

我沒有獲取所選項目的數據，我喜歡從dropDownkist「SetTime」獲取控制器 – Zahir

我敢打賭，您需要附加到表單提交事件上。您可能會打兩次電話，因爲按鈕的連接方式與您在提交的處理程序中的連接方式相同。在表單提交中，您可以調用您的ajax。 –

你的代碼將生成名稱SeTime一個SELECT元素。所以，當你提交表單（AJAX或正常表單提交），瀏覽器會發送所選選項值作爲表單項目與關鍵SeTime值。它應該工作，假設你在http post操作方法中有一個同名的參數。

[HttpPost] 
public ActionResult Administration(string SeTime) 
{ 
// to do : Do something with SeTime 
// to do : Return something 
}

如果您使用的視圖模型作爲方法的參數，以確保它是設置表，使模型粘結劑將能夠從提交的表單請求設置的值。

public class YourViewModel 
{ 
    public string SeTime {set;get;} 
    // other properties here 
}

此外，我看到一個與您的UI代碼的小問題。根據您當前的代碼，當用戶點擊提交按鈕，它調用AjaxCallAndShowMessage JS功能，還增加了一個submit事件處理程序的形式。所以當用戶第二次點擊時，它再次註冊事件處理程序到同一個表單。這意味着它現在會發出2個Ajax電話。當用戶第三次點擊時，它將再次註冊事件處理程序，現在它將進行3個呼叫。這繼續！

您只需註冊一次即可。如果您從HTML標記的onclick和去onobutrusive JavaScript的方式，

<input type="submit" value="Set Time " />

並註冊在文檔準備事件提交事件處理程序，

$(function() { 

    $('form').submit(function() { 

     $.ajax({ 
      url: this.action, 
      type: this.method, 
      data: $(this).serialize(), 
      success: function(result) { 
       alert("Ajax call is done"); 
      } 
     }); 

     return false; 
    }); 
});

來源

2017-06-19 15:58:01 Shyju

我需要設置表單ID而不是$（'form'） – Zahir

jQuery選擇器$（'form'）'將返回頁面中的所有表單元素。因此，如果您有多個表單，最好使用特定的選擇器，如表單ID或其他表單屬性。 – Shyju

感謝您的幫助，但它不在我的工作，我不知道爲什麼.. – Zahir

，而不是使用jQuery，AJAX提交表單使用@Ajax。BeginForm 它的工作原理相同的jquery ajax調用，它張貼的形式而無需刷新頁面

<div id="dialog" title=""> 
@using (Ajax.BeginForm("Administration", "Home", new AjaxOptions 
       { 
        OnSuccess = "OnSuccess", 
        OnFailure = "OnFailure", 
        LoadingElementId = "progress" 
       })) 
    { 

     @Html.DropDownList("SeTime", new List<SelectListItem> 
     { 
     new SelectListItem{ Text="1 Min", Value = "60" }, 
     new SelectListItem{ Text="2 Min", Value = "120" }, 
     new SelectListItem{ Text="3 Min", Value = "180" }, 
     }, "Select Time") 
     <input type="submit" value="Set Time" /> 
     } 
    } 

</div>

來源

2017-06-19 16:01:43

[List item][1] [請在此輸入鏈接的描述] [1]

Blockquote

強調文本

列表項

[1]：HTTP：// 強調文本

來源

2017-12-14 06:11:27

Ajax調用的形式提交無需刷新頁面MVC5

回答

相關問題