Ich kann kein Bearbeitungsformular senden

Question

Ich dachte, es wäre eine gute Idee und versuchen, ein Bearbeitungsformular zu implementieren, das von der Stelle in der Tabelle mit den Daten, die Sie bearbeiten möchten, stattfindet. Ich war nicht in der Lage, mein Formular zu übermitteln, während das Erstellungsformular gleich funktioniert und ordnungsgemäß funktioniert. Hier ist der Code, mit dem ich Hilfe benötige. Dies ist die Teilansicht des Bearbeitungsformulars.

@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> 
} 

Hier ist die Ajax, dass ich die Form, um zu versuchen bin mit und senden:

$('#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>'); 
      } 
     }); 
    }); 

Ich habe versucht, sowohl den Erfolg und Fehler ein console.log innen zu setzen, und ich sehe nicht entweder von ihnen in der Konsole

EDIT: hier ist die C# Methode:

[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); 
    } 

ich die UnitOfWork bestätigen funktioniert richtig. All diese Funktion verbindet sich mit der Datenbank und aktualisiert/speichert die Informationen. Dies hat in früheren Versionen gearbeitet

Answer 1

Ich habe es zur Arbeit bekommen. Interessanterweise konnte ich das Skript-Tag nicht in der Indexansicht behalten. Ich musste es in die Teilansicht zurücklegen (aus irgendeinem Grund funktionierte es vorher nicht). Hier wird die aktualisierte Teil:

@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> 

Ich habe herausgefunden, dass Formen und Tabellenzeilen nicht gut zusammen arbeiten (dies könnte sein, warum das Formular nicht), wenn Sie es wollen, ich horizontal sein wurde gesagt, und ich kann bestätigen, dass es funktioniert display: flex; justify-content: space-between; verwenden. Wenn Sie es wie ich in einer Tabelle anzeigen möchten, entfernen Sie alle Tabellendaten-Tags aus dem Formular selbst und umschließen Sie das gesamte Formular in einem Tabellendaten-Tag. Es sieht nicht am besten aus, aber es funktioniert! Für diejenigen mit zukünftigen Problemen wie diese hoffe ich, dass dies hilft!

Answer 2

habe ich diese Art von Fragen stellen, und ich beschlossen, es dies zu tun:

Erklären Sie Ihre Taste wie folgt:

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

und fügen Sie diese Funktion js :

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

    } 
}); 

Hoffe es hilft.