使用jquery ajax在控制器操作中获取MVC 2表单值

时间：2012-12-21 06:35:35

标签： asp.net-mvc jquery asp.net-mvc-2

我正在研究asp.net MVC 2应用程序。我有一个这样的表格：

<% using (Html.BeginForm("UpdateRecordingDetails", "Recording", FormMethod.Post, new { id = "frmRecordingEdit" }))
   {%>
<%= Html.Hidden("AccountIDsEdit",  ViewData["AccountIDsEdit"]) %>
<%= Html.Hidden("SelId",  ViewData["SelId"]) %>
<%= Html.Hidden("EditMode", ViewData["EditMode"]) %>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
    <tr valign="top">
        <td>
            <table align="center">
                <tr>
                    <td style="width: 32%;">
                        <%=Html.HiddenFor(model=>model.Id) %>
                        <b>Person Name</b>
                    </td>
                    <td>
                        <%: Html.TextBoxFor(model => model.PersonName, new { @class = "textarea wide" , disabled ="disabled"})%>
                    </td>
                </tr>
                <tr>
                    <td style="width: 32%;">
                        <b>Email</b>
                    </td>
                    <td>
                        <%: Html.TextBoxFor(model => model.Email, new { @class = "textarea wide" })%>
                    </td>
                </tr>
                <tr>
                    <td style="width: 32%;">
                        <b>Notes</b>
                    </td>
                    <td>
                        <%: Html.TextAreaFor(model => model.Notes, new { @class = "textarea widetextarea" })%>
                    </td>
                </tr>
                <tr>
                    <td style="width: 32%;">
                        <b>Display Notes on Playback</b>
                    </td>
                    <td>
                        <%: Html.DropDownList("isNotesVisible", ViewData["displayNotes"] as SelectList, new {@class = "normal" })%>
                    </td>
                </tr>
                <tr>
                    <td style="width: 32%;">
                        <b>Call ID Number</b>
                    </td>
                    <td>
                        <%: Html.TextBoxFor(model => model.CallIDNumber, new { @class = "textarea normal", disabled = "disabled" })%>
                    </td>
                </tr>
                <tr>
                    <td style="width: 32%;">
                        <b>Dblink Unique URL</b>
                    </td>
                    <td>
                        <span id="DBLinkUniqueURL" class="small">
                            <%= Model.DBLinkUniqueURL %>
                        </span>
                        <input id="btnCopy" type="button" value="Copy to Clipboard" onclick="copyToClipboard('DBLinkUniqueURL')" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <b>Call Password</b>
                    </td>
                    <td>
                        <%: Html.TextBoxFor(model => model.CallPassword, new { @class = "textarea wide", disabled = "disabled" })%>
                    </td>
                </tr>
                <tr>
                    <td>
                        <b>Number Called</b>
                    </td>
                    <td>
                        <%: Html.TextBoxFor(model => model.NumberCalledFrom, new { @class = "textarea wide", disabled = "disabled" })%>
                    </td>
                </tr>
                <tr>
                    <td>
                        <b>Called From</b>
                    </td>
                    <td>
                        <%: Html.TextBoxFor(model => model.NumberCalledTo, new { @class = "textarea wide", disabled = "disabled" })%>
                    </td>
                </tr>
                <tr>
                    <td>
                        <b>Call Duration</b>
                    </td>
                    <td>
                        <%: Html.TextBoxFor(model => model.CallDuration, new { @class = "textarea normal", disabled = "disabled" })%>
                    </td>
                </tr>
                <tr>
                    <td>
                        <b>Call Rate</b>
                    </td>
                    <td>
                        <%: Html.TextBoxFor(model => model.CallRate, new { @class = "textarea normal", disabled = "disabled" })%>
                    </td>
                </tr>
                <tr>
                    <td>
                        <b>Call Cost</b>
                    </td>
                    <td>
                        <%: Html.TextBoxFor(model => model.CallCost, new { @class = "textarea tiny", disabled = "disabled" })%>
                        <%: Html.TextBoxFor(model => model.CallCost, new { @class = "textarea normal", disabled = "disabled" })%>
                    </td>
                </tr>
                <tr>
                    <td>
                        <b>User ID/ Email</b>
                    </td>
                    <td>
                        <%: Html.TextBoxFor(model => model.LoginId, new { @class = "textarea wide", disabled = "disabled" })%>
                    </td>
                </tr>
                <tr>
                    <td>
                        <b>Date/Time Added</b>
                    </td>
                    <td>
                        <%: Html.TextBoxFor(model => model.CreationDate, new { @class = "textarea wide", disabled = "disabled" })%>
                    </td>
                </tr>
                <tr>
                    <td>
                        <b>Call Status</b>
                    </td>
                    <td>
                        <%: Html.TextBoxFor(model => model.CallStatus, new { @class = "textarea normal", disabled = "disabled" })%>
                    </td>
                </tr>
                <tr>
                    <td>
                        <b>Archived</b>
                    </td>
                    <td>
                        <%: Html.CheckBoxFor(model => model.isArchived, new { disabled = "disabled"})%>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
<%            
   } 
%>

我在这个表单外面有一个按钮，它使用jquery ajax发布表单，如下所示：

function editAccountDetails() {

    jQuery.ajax({
        url: "/recording/UpdateRecordingDetails",
        type: 'POST',
        data: $('frmRecordingEdit').serialize(),
        dataType: "json",
        contentType: "application/json",
        success: function (data) {
            alert(data);
        }
    });   
}

在控制器操作方法中，我没有得到所有这些字段。我只得到viewdata中的那些或没有禁用的复选框值。我的行动方法是：

 [Authorize]
        public ActionResult UpdateRecordingDetails(FormCollection form, CallRecordingModel objCampaignMode)
        {
            return Content("testing");
        }

两个formcollection都没有注意到模型具有表单中的所有字段值。 

[Edit]


form has values for 

AccountIDsEdit
SelId
EditMode
Id
Email
Notes
isNotesVisible
isArchived


model has values in three fields
email, Id, notes

<td>
            <table align="center">
                <tbody><tr>
                    <td style="width: 32%;">
                        <input type="hidden" value="2" name="Id" id="Id">
                        <b>Person Name</b>
                    </td>
                    <td>
                        <input type="text" value="Asif" readonly="readonly" name="PersonName" id="PersonName" disabled="disabled" class="textarea wide">
                    </td>
                </tr>
                <tr>
                    <td style="width: 32%;">
                        <b>Email</b>
                    </td>
                    <td>
                        <input type="text" value="asif@cc.com" name="Email" id="Email" class="textarea wide">
                    </td>
                </tr>
                <tr>
                    <td style="width: 32%;">
                        <b>Notes</b>
                    </td>
                    <td>
                        <textarea rows="2" name="Notes" id="Notes" cols="20" class="textarea widetextarea">asif notes</textarea>
                    </td>
                </tr>
                <tr>
                    <td style="width: 32%;">
                        <b>Display Notes on Playback</b>
                    </td>
                    <td>
                        <select name="isNotesVisible" id="isNotesVisible" class="normal"><option selected="selected">Yes</option>
<option>No</option>
</select>
                    </td>
                </tr>
                <tr>
                    <td style="width: 32%;">
                        <b>Call ID Number</b>
                    </td>
                    <td>
                        <input type="text" value="callIDNum002" name="CallIDNumber" id="CallIDNumber" disabled="disabled" class="textarea normal">
                    </td>
                </tr>
                <tr>
                    <td style="width: 32%;">
                        <b>Dblink Unique URL</b>
                    </td>
                    <td>
                        <span class="small" id="DBLinkUniqueURL">
                            http://temp.com/callIDNum002
                        </span>
                        <input type="button" onclick="copyToClipboard('DBLinkUniqueURL')" value="Copy to Clipboard" id="btnCopy">
                    </td>
                </tr>
                <tr>
                    <td>
                        <b>Call Password</b>
                    </td>
                    <td>
                        <input type="text" value="temppass" name="CallPassword" id="CallPassword" disabled="disabled" class="textarea wide">
                    </td>
                </tr>
                <tr>
                    <td>
                        <b>Number Called</b>
                    </td>
                    <td>
                        <input type="text" value="03344037289" name="NumberCalledFrom" id="NumberCalledFrom" disabled="disabled" class="textarea wide">
                    </td>
                </tr>
                <tr>
                    <td>
                        <b>Called From</b>
                    </td>
                    <td>
                        <input type="text" value="0442510406" name="NumberCalledTo" id="NumberCalledTo" disabled="disabled" class="textarea wide">
                    </td>
                </tr>
                <tr>
                    <td>
                        <b>Call Duration</b>
                    </td>
                    <td>
                        <input type="text" value="00:01:30" name="CallDuration" id="CallDuration" disabled="disabled" class="textarea normal">
                    </td>
                </tr>
                <tr>
                    <td>
                        <b>Call Rate</b>
                    </td>
                    <td>
                        <input type="text" value="4" name="CallRate" id="CallRate" disabled="disabled" class="textarea normal">
                    </td>
                </tr>
                <tr>
                    <td>
                        <b>Call Cost</b>
                    </td>
                    <td>
                        <input type="text" value="3" name="CallCost" id="CallCost" disabled="disabled" class="textarea tiny">
                        <input type="text" value="3" name="CallCost" id="CallCost" disabled="disabled" class="textarea normal">
                    </td>
                </tr>
                <tr>
                    <td>
                        <b>User ID/ Email</b>
                    </td>
                    <td>
                        <input type="text" value="asif_hameed_371@hotmail.com" name="LoginId" id="LoginId" disabled="disabled" class="textarea wide">
                    </td>
                </tr>
                <tr>
                    <td>
                        <b>Date/Time Added</b>
                    </td>
                    <td>
                        <input type="text" value="12/19/2012 12:00:00 AM" name="CreationDate" id="CreationDate" disabled="disabled" class="textarea wide">
                    </td>
                </tr>
                <tr>
                    <td>
                        <b>Call Status</b>
                    </td>
                    <td>
                        <input type="text" value="Completed" name="CallStatus" id="CallStatus" disabled="disabled" class="textarea normal">
                    </td>
                </tr>
                <tr>
                    <td>
                        <b>Archived</b>
                    </td>
                    <td>
                        <input type="checkbox" value="true" name="isArchived" id="isArchived" disabled="disabled"><input type="hidden" value="false" name="isArchived">
                    </td>
                </tr>
            </tbody></table>
        </td>

[EDIT2] 

Request URL:http://localhost:62843/recording/UpdateRecordingDetails
Request Method:POST
Status Code:200 OK
Request Headersview source
Accept:application/json, text/javascript, */*; q=0.01
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Content-Length:0
Content-Type:application/json
Cookie:SiteBrowsedCookie=1;edited value&FirstVisit=9/14/2012 5:42:08 PM; Nop.customer=61f1bf57-034a-4427-a08c-e9442061f224; glimpseState=null; glimpseClientName=null; glimpseOptions=null; ASP.NET_SessionId=lephqzclxx35mjqier5to5l4; .CRM=85A97958C0415B3C8106A7EE2B473EE00C1F53C5E428C399AC951D7AFEA5A325C8BC54225AC959917CF1754734CF8DC6BD13DAAA7DA1EE64D4A177BB3FA3529992A1E596AF6D1D4391242C412EB809F8125EC03DBC1C5A36FDAE3BAB915E2233C30E0876EFE62B3D8CAE1CCAD020DA6791EA17FD3B085C1A913C8DBF822408FD0E2AA3B19F67AFE34C9176A3783F0935D61B847D51958ABB72AB2E9491864F956A90729E; returnUrl=returnUrl=http://localhost:62843/Account/Login
Host:localhost:62843
Origin:http://localhost:62843
Referer:http://localhost:62843/Recording/Detail
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.97 Safari/537.11
X-Requested-With:XMLHttpRequest
Response Headersview source
Cache-Control:private, s-maxage=0
Connection:Close
Content-Length:8
Content-Type:text/html; charset=utf-8
Date:Fri, 21 Dec 2012 07:16:02 GMT
Server:ASP.NET Development Server/10.0.0.0
X-AspNet-Version:4.0.30319
X-AspNetMvc-Version:3.0

请建议解决方案。

1 个答案:

答案 0 :(得分：1)

data: $('frmRecordingEdit').serialize(),

应该是：

data: $('#frmRecordingEdit').serialize(),

因为这就是id selectors在jQuery中的工作方式。

此外，您还没有显示如何/在何处调用发送AJAX请求的editAccountDetails函数，但是如果它位于表单的onsubmit处理程序或onclick内此表单的提交按钮的处理程序或某个锚点的onclick处理程序，您应该确保从此处理程序返回false以确保您取消默认操作并允许执行AJAX调用。如果您不取消默认操作，浏览器将只是重定向远离页面，不会执行任何AJAX调用。

相关问题
最新问题