我正在尝试在页面中有一些Ajax表单根本不起作用，它不会在提交时发送任何请求，在firebug中注明，表单正在被ajax加载到页面，但我有其他表单由ajax加载到jquery UI对话框中，它们工作正常，这是我的整个局部视图代码，（部分操作“SeacrhTasksTable”不工作）我将附加渲染整个HTML但是它太大了
@model APS.HelpDesk.UI.MyModel<APS.HelpDesk.Data.App_ProjectTask>
<h2>
پروژه
@ViewBag.ProjectTitle
</h2>
<div class="wrapperTask">
<div class="firstTask">
@* <input type="hidden" value="@(ViewBag.ProjectId)" />*@
@Ajax.ActionLink("تعریف کار جدید", "AddProjectTaskDialog", new
{
Id = ViewBag.ProjectId,
area = "ProjectAdmin"
}, new AjaxOptions()
{
HttpMethod = "GET",
LoadingElementId = "AddProjectTaskLoadingGif",
UpdateTargetId = "AddProjectTaskDialog",
InsertionMode = InsertionMode.Replace,
OnBegin = "clearDialogs();",
OnSuccess = " $('#AddProjectTaskDialog').dialog('open');"
}, new { id = "AddProjecTaskLink" })
<a href="javascript:void(0);" id="resetbutton">بارگذاری مجدد جدول </a>
</div>
<div class="secondTask">
<div id="AddProjectTaskLoadingGif" style="display: none;">
<img src="@Url.Content("~/Content/Images/ajax-loader/253L.gif")" alt="" />
</div>
</div>
</div>
<div id="test">
<table>
<tr>
<th>
#
</th>
<th>
کد کار
</th>
<th>
عنوان کار
</th>
<th style="min-width: 300px;">
مختصری از توضيحات
</th>
<th>
تاريخ ايجاد کار
</th>
<th>
مهلت انجام
</th>
<th>
وضعيت
</th>
<th>
وابستگی های کار
</th>
<th colspan="2">
ويرايش و حذف
</th>
</tr>
@using (Ajax.BeginForm("SeacrhTasksTable", new { area = "ProjectAdmin" }, new AjaxOptions
{
HttpMethod = "POST",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "test"
}))
{
<tr>
<td>
</td>
<td>
<input type="text" id="IdTask" style = "width:40px" name = "Id" />
</td>
<td>
<input type="text" id="TitleTask" style = "width:80%;" placeholder = "جست و جو" name = "Title" />
</td>
<td style="min-width: 250px;">
<input type="text" id="DescriptionTask" style = "width:80%;" placeholder = "جست و جو" name = "Description" />
</td>
<td>
<input type="text" id="DeliverDateTask" style = "width:80%;" placeholder = "جست و جو" name = "DeliverDate" />
</td>
<td>
<input type="text" id="DeadlineDateTask" style = "width:80%;" placeholder = "جست و جو" name = "DeadlineDate" />
</td>
<td>
<select name="Status">
<option value="0"> همه</option>
<option value="1">شروع نشده</option>
<option value="2">در حال انجام</option>
<option value="3">تمام شده</option>
<option value="4">بی مسئول</option>
</select>
</td>
<td colspan="4">
<input type="submit" value="submit" style="" />
<input type="hidden" value="@(ViewBag.ProjectId)" name="ProjectId" id ="ProjectIdTask"/>
</td>
</tr>
}
<tbody id="TaskList">
@Html.Partial("_ProjectTaskList", Model.MyList)
</tbody>
<tfoot>
<tr>
<td colspan="3">
صفحه
@(Model.PageIndex + 1)
از
@Model.TotalPages
[ تعداد کل : @Model.TotalCount ]
</td>
<td id="pagesizeTaskTd" style="text-align: center;">
سايز صفحه
<select id="pagesizeTask">
<option value="5">5</option>
<option value="10" selected="selected">10</option>
<option value="25">25</option>
<option value="50">50</option>
</select>
</td>
<td colspan="6" align="left" class="tfoot-padding" id="morepagesTask">
@{
int start = Model.PageIndex;
if (start > 0)
{
int c = 0;
while (start > 0 && c < 4)
{
c++;
start--;
}
}
for (int j = start; j < Model.TotalPages && j < start + 10; j++)
{
if (Model.PageIndex != j)
{
<span>
@Ajax.ActionLink((j + 1).ToString(), "TaskListTablePage", "Project", new
{
Id = ViewBag.ProjectId,
PageIndex = j,
PageSize = Model.PageSize,
area = "ProjectAdmin"
}, new AjaxOptions
{
HttpMethod = "GET",
UpdateTargetId = "test",
InsertionMode = InsertionMode.Replace
}, new { mode = "mode" })
</span>
}
else
{
<span><b style="text-decoration: underline;">@(j + 1)</b></span>
<input type="hidden" id="PIndexAll" value="@(j)" />
}
}
if (Model.PageIndex + 10 < Model.TotalPages)
{
<span>. . . </span>
}
}
</td>
</tr>
</tfoot>
</table>
</div>
<div id="AddProjectTaskDialog" title="تعریف کار جدید" style="text-align: right;">
</div>
<div id="EditProjectTaskDialog" title="ويرايش کار" style="text-align: right;">
</div>
<div id="ReportProjectTaskDialog" title="گزارش کل کار" style="text-align: right;">
</div>
<div id="DescriptionProjectTaskDialog" title="توضيح کار" style="text-align: right;">
</div>
<div id="EditProjectDepenDialog" style="text-align: right;">
</div>
<div id="Taskresult">
</div>
<script type="text/javascript">
$("#AddProjectTaskDialog").dialog({
autoOpen: false,
width: 720,
modal: true,
draggable: true,
position: "top"
});
$("#EditProjectTaskDialog").dialog({
autoOpen: false,
width: 720,
modal: true,
draggable: true,
position: "top"
});
$("#EditProjectDepenDialog").dialog({
autoOpen: false,
width: 720,
modal: true,
draggable: true,
position: "top",
buttons: {
"OK": function () {
$(this).dialog("close");
}
}
});
$("#AddProjecTaskLink").button();
$("#resetbutton").button();
$("#pagesizeTask").live( 'change' , function (){
var val = $(this).find(":selected").val();
$("#morepagesTask").find('*[mode]').each(function(index){
var n=$(this).attr("href").lastIndexOf("=");
var t= $(this).attr("href").substring(0,n+1);
$(this).attr("href" ,t+val );
});
var url = '@Url.Action("TaskListTablePage", new { area = "ProjectAdmin" })';
url += '?Id=' + @(ViewBag.ProjectId);
url += '&PageIndex=' + $("#PIndexAll").val();
url += '&PageSize=' +val;
$.ajax({
url: url, type: 'get',
success: function (data, status) {
$("#test").html('');
$("#test").html(data);
}
});
});
$(".firstTask").delegate( '#resetbutton','click',function(){
var url = '@Url.Action("TaskListTablePage", new { area = "ProjectAdmin" })';
url += '?Id=' + @(ViewBag.ProjectId);
url += '&PageIndex=0' ;
url += '&PageSize=10';
$.ajax({
url: url, type: 'get',
success: function (data, status) {
$("#test").html('');
$("#test" ).html(data);
}
});
});
</script>
表单的HTML
<form action="/ProjectAdmin/Project/SeacrhTasksTable" data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#test" id="form0" method="post"> <tr>
<td>
</td>
<td>
<input type="text" id="IdTask" style = "width:40px" name = "Id" />
</td>
<td>
<input type="text" id="TitleTask" style = "width:80%;" placeholder = "جست و جو" name = "Title" />
</td>
<td style="min-width: 250px;">
<input type="text" id="DescriptionTask" style = "width:80%;" placeholder = "جست و جو" name = "Description" />
</td>
<td>
<input type="text" id="DeliverDateTask" style = "width:80%;" placeholder = "جست و جو" name = "DeliverDate" />
</td>
<td>
<input type="text" id="DeadlineDateTask" style = "width:80%;" placeholder = "جست و جو" name = "DeadlineDate" />
</td>
<td>
<select name="Status">
<option value="0"> همه</option>
<option value="1">شروع نشده</option>
<option value="2">در حال انجام</option>
<option value="3">تمام شده</option>
<option value="4">بی مسئول</option>
</select>
</td>
<td colspan="4">
<input type="submit" value="submit" style="" />
<input type="hidden" value="38" name="ProjectId" id ="ProjectIdTask"/>
</td>
</tr>
</form>
答案 0 :(得分：5)
您的代码无效，因为您的标记无效。无效标记我的意思是你有一个<form>直接嵌套在<tr>内，这是规范禁止的。您在<form>，<table>或<tbody>内无法<tr>。
为了以简化的方式说明问题，以下是您目前无效的内容：
<table>
<tr>
<form>
<td>Foo</td>
<td>Bar</td>
<td><input type="submit" /></td>
</form>
</tr>
</table>
只需使用FireBug检查DOM，您就会看到<form>单独浮动（立即打开和关闭），内部没有任何元素。
这是无效的标记，它会导致未定义的行为，在您的情况下，浏览器只是不提交表单。发生这种情况的原因是因为您使用的unobtrusive-ajax库使用.live向所有ajax表单订阅了submit事件：
$("form[data-ajax=true]").live("submit", function (evt) {
...
});
事情是在这种情况下永远不会引发提交事件。昨天已经问过similar question同样的问题。
要解决此问题，您可以使用嵌套表：
<table>
<tr>
<td>
<form>
<table>
<tr>
<td>Foo</td>
<td>Bar</td>
<td><input type="submit" /></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
只需将Ajax.BeginForm放在<td>内，然后使用嵌套表来放置元素。