從ASP.NET MVC下的jquery生成的彈出窗口提交表單

我試圖複製類似於StackOverflow上'標記'功能的東西，其中用戶點擊'刪除'鏈接。然後他們會顯示一個彈出窗口（使用jQuery），提示他們爲什麼要刪除該項目。通過一系列單選按鈕以及「其他」文本框，向他們展示了一些預定義的選項。他們必須在提交表單之前選擇其中一個選項，然後再執行一些服務器操作，然後最初的彈出消失（並且我會在幾個位置操縱一些文本）。從ASP.NET MVC下的jquery生成的彈出窗口提交表單

我已經得到了彈出窗口，並且我在這個彈出窗口中提供了一個帶有各種選項的窗體，但是我不確定如何處理這個窗體的發佈。如果我將它視爲一種正常形式，當用戶在彈出窗口中單擊提交按鈕時，它將不會執行任何ajax功能，而是發佈到我的控制器操作方法之一，然後我需要（服務器端）重定向回我的頁面，以查看更改。

在AJAX類型場景中，通常如何處理彈出窗口中的數據集合？任何人都可以提供任何例子嗎？我看不出「標誌」功能是如何做到的。

來源

2012-07-05 marcusstarnes

您可以使用內置的MVC AJAX幫助程序。大致如下......

聲明一些AJAX選項：

@{ 
    AjaxOptions ajaxOpts = new AjaxOptions { UpdateTargetId = "target" }; 
}

然後使用AJAX BeginForm方法聲明表單：

@using (Ajax.BeginForm("GetData", ajaxOpts)) 
{ 
    @* Here you put your form data. I'm guessing your popup could just be a DIV that gets positioned and made visible *@ 


}

你的目標，更新，當AJAX請求回來只是一個簡單的DIV：

<div id="target"> 
    @* The output of your GetData controller method will end up here *@ 
    @Html.Action("GetData", new { model = Model }) 
</div>

然後在你的控制器中有東西在返回包含您的數據的部分視圖：

public PartialViewResult GetData(ViewModel model) 
    { 
    // Do some stuff here to fetch some data 
    // ViewModel will be whatever your view model is called 

    return this.PartialView("GetData", model); 
    }

這是獲取AJAX工作的基礎知識。如果您想要將HTML發回瀏覽器並更新頁面的不同位，您必須添加一個jQuery函數，通過爲AjaxOptions的OnComplete參數指定一個函數來獲取AJAX幫助程序。

來自您的部分視圖的數據可能會包含一些隱藏的HTML塊，您可以在瀏覽器中的其他位置移動該塊。

不幸的是，MVC AJAX幫助程序只支持一個UpdateTargetId。

編輯補充

你需要在你的web配置文件來設置此在的appSettings：

<add key="UnobtrusiveJavaScriptEnabled" value="true"/>

您還需要包括在HTML輸出jQuery的擴展名（也許在你的_Layout.cshtml文件？）：

<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>

來源

2012-07-05 14:49:30

您可以重寫表單的提交行爲，然後將序列化的表單結果發送到AJAX帖子中的服務器。

$('#myForm').submit(function() { 

    $.ajax({ 
     url: "MyPage.aspx", 
     type: "POST", 
     data: $(this).serialize(), 
     dataType: "text" 
    }); 

    return false; 
});

來源

2012-07-05 14:26:59

從ASP.NET MVC下的jquery生成的彈出窗口提交表單

回答

相關問題