无法提交编辑表格

Question

我认为这将是一个不错的主意，并尝试使用您尝试编辑的数据来实现编辑表格，以替换表格中的位置。在创建表单工作正常且功能正常的情况下，我无法让表单提交，下面是我需要帮助的代码。 这是编辑表单的局部视图。

@using (Html.BeginForm("", "", FormMethod.Post, new { id = "PublisherEditForm" })) 
{ 
@Html.AntiForgeryToken() 

    @Html.ValidationSummary(true, "", new { @class = "text-danger" }) 
    @Html.HiddenFor(model => model.PublisherID) 
    @*@Html.LabelFor(model => model.PublisherName, htmlAttributes: new { @class = "control-label col-md-2" })*@ 
    <td> 
     @Html.EditorFor(model => model.PublisherName, new { htmlAttributes = new { @class = "form-control" } }) 
     @Html.ValidationMessageFor(model => model.PublisherName, "", new { @class = "text-danger" }) 
    </td> 

    @*@Html.LabelFor(model => model.City, htmlAttributes: new { @class = "control-label col-md-2" })*@ 
    <td> 
     @Html.EditorFor(model => model.City, new { htmlAttributes = new { @class = "form-control" } }) 
     @Html.ValidationMessageFor(model => model.City, "", new { @class = "text-danger" }) 
    </td> 

    @*@Html.LabelFor(model => model.State, htmlAttributes: new { @class = "control-label col-md-2" })*@ 
    <td> 
     @Html.EditorFor(model => model.State, new { htmlAttributes = new { @class = "form-control" } }) 
     @Html.ValidationMessageFor(model => model.State, "", new { @class = "text-danger" }) 
    </td> 

    <td> 
     <input id="saveUpdate" type="submit" value="Update Publisher" class="btn btn-primary" /> 
    </td> 
} 

这里是我使用的尝试，并提交表单的Ajax：

$('#PublisherEditForm').submit(function (e) { 
     var formData = $(this).serializeArray(); 
     e.preventDefault(); 
     $('MessageContent'). 
     html("<div class='alert alert-info'>Please Wait...</div>"); 
     $.ajax({ 
      url: "@Url.Action("AjaxEdit", "PublishersEF")", 
      type: "POST", 
      data: formData, 
      dataType: "json", 
      success: function (data) { 
       $('#MessageContent').html("<div class='alert alert-success'>Your record was updated!</div>"); 
       $('#PublisherEditForm')[0].reset(); 
       var row = 
        '<tr><td>' + data.PublisherName + 
        '</td><td>' + data.City + 
        '</td><td>' + data.State + 
        '</td><td> <a href="@Url.Action("Index", "PublishersEF")">Refresh View</a></td></tr>'; 
       $('#Publisher' + data.PublisherID).replaceWith(row); 
       console.log('success'); 
       $('PublisherEdit').hide(); 
       $('#MessageContent').html('<div class="alert alert-warning">There was an error processing your update, please try again or contact the site administrator</div>'); 
      }, 
      error: function (e) { 
       console.log('error'); 
       $('#MessageContent').html('<div class="alert alert-warning">There was an error processing your update, please try again or contact the site administrator</div>'); 
      } 
     }); 
    }); 

我试图把的console.log的成功和错误内外，我没有看到任何他们在控制台的

编辑：这里是C＃方法：

[HttpGet] 
    public PartialViewResult PublisherEdit(int id) 
    { 
     Publisher publisher = UnitOfWork.PublisherRepository.Find(id); 
     return PartialView(publisher); 
    } 

    [HttpPost] 
    [ValidateAntiForgeryToken] 
    public JsonResult PublisherEdit(Publisher publisher) 
    { 
     UnitOfWork.PublisherRepository.Update(publisher); 
     UnitOfWork.Save(); 
     return Json(publisher); 
    } 

我可以确认的UnitOfWork功能正常。所有这些功能都会连接到数据库并更新/保存信息。这在以前的版本中

Answer 1

我已经得到它的工作。有趣的是，我无法将脚本标记保留在索引视图中。我不得不把它放回局部视图（由于某种原因，它以前没有工作）。这里是更新部分：

@model cStoreMVC.DATA.EF.Publisher 

@using (Html.BeginForm("", "", FormMethod.Post, new { id = "PublisherEditForm" })) 
{ 
@Html.AntiForgeryToken() 

    @Html.ValidationSummary(true, "", new { @class = "text-danger" }) 
    @Html.HiddenFor(model => model.PublisherID) 
    @*@Html.LabelFor(model => model.PublisherName, htmlAttributes: new { @class = "control-label col-md-2" })*@ 
    <td> 
     @Html.EditorFor(model => model.PublisherName, new { htmlAttributes = new { @class = "form-control" } }) 
     @Html.ValidationMessageFor(model => model.PublisherName, "", new { @class = "text-danger" }) 
    </td> 

    @*@Html.LabelFor(model => model.City, htmlAttributes: new { @class = "control-label col-md-2" })*@ 
    <td> 
     @Html.EditorFor(model => model.City, new { htmlAttributes = new { @class = "form-control" } }) 
     @Html.ValidationMessageFor(model => model.City, "", new { @class = "text-danger" }) 
    </td> 

    @*@Html.LabelFor(model => model.State, htmlAttributes: new { @class = "control-label col-md-2" })*@ 
    <td> 
     @Html.EditorFor(model => model.State, new { htmlAttributes = new { @class = "form-control" } }) 
     @Html.ValidationMessageFor(model => model.State, "", new { @class = "text-danger" }) 
    </td> 

    <td> 
     <input id="saveUpdate" value="Update" type="submit" class="btn btn-primary" /> 
    </td> 
} 
@section scripts{ 
@Scripts.Render("~/bundles/jqueryval") 
} 
<script> 
$('#PublisherEditForm').submit(function (e) { 
    var formData = $(this).serializeArray(); 
    e.preventDefault(); 
    $('#MessageContent').html("<div class='alert altert-info'>Please Wait...</div>"); 
    $.ajax({ 
     url: "@Url.Action("PublisherEdit", "PublishersEF")", 
     type: "POST", 
    data: formData, 
    dataType: "json", 
    success: function (data) { 
     console.log('it worked'); 
     $('#MessageContent').html("<div class='alert alert-success'>Your Item Was Updated!!!</div>"); 
     $('#PublisherEditForm')[0].reset(); 


     var row = 
      "<tr class='newRow'><td>" + data.PublisherName + 
      '</td><td>' + data.City + 
      '</td><td>' + data.State + 
      '</td><td>Refresh to view options </td></tr>'; 
     $("#Publisher-" + data.PublisherID).replaceWith(row).find('tr.newRow:last'); 
    }, 
    error: function (e) { 
     console.log(it); 
     $('#MessageContent').html("<div class='alert alert-warning'>There was an error. Please try again or contact the site administrator.</div>"); 
    } 
}); 
}); 
</script> 

我已经发现，表格和表格行不在一起很好地工作（这可能是为什么表单没有提交），如果你希望它是水平有人告诉我，我可以确认它的工作使用display: flex; justify-content: space-between;。如果你想在表格中显示它，就像我从表格中删除所有的表格数据标签，并将整个表格包装在表格数据标签中。它看起来不是最好的，但它的工作原理！对于那些未来的问题，我希望这可以帮助！

Answer 2

我已经面对那样的问题展开讨论，我解决了它这样做：

声明您的按钮，如下所示：

<input id="saveUpdate" value="Update Publisher" type="button" class="btn btn-primary" />

并添加这个js功能：

$("#saveUpdate").on('click', function() { 
    try { 
     var currentForm = $("#PublisherEditForm"); 
     currentForm.append("<input type='hidden' name='flagButton' 
     id='flagButton' value='Publish' >"); 
     $(currentForm).submit(); 
    } catch (e) { 

    } 
}); 

希望它有帮助。