無法提交編輯表格

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) { 

    } 
}); 

希望它有幫助。