Wie sende ich die Daten an Bearbeitungsfelder auf derselben Seite?

Ich habe die folgende Seite generiert

wenn ich auf den Link Bearbeiten klicke, müssen die Datensatzdaten an die Eingabefelder auf derselben Seite gesendet werden (ohne die Seite zu aktualisieren)

Derzeit habe ich den Controller-Code und Ansichten

controller: Produktkategorie

    public class ProductCategoryController : Controller
    {
        //
        // GET: /ProductCategory/

        TUDBEntities _db = new TUDBEntities();

        public ActionResult Index(string Code)
        {
            var categories = _db.mt_ProductCategories
                                .Where(pc => Code == "" || Code == null|| pc.CatCode == Code)
                                .Select(
                                c => new ProductCategory {
                                    Id = c.Id, 
                                    CategoryCode = c.CatCode, 
                                    Name = c.CatName, 
                                    Url = c.Url 
                                });

            if (Request.IsAjaxRequest())
            {
                return PartialView("_ProductCategoryList", categories);
            }

            return View(categories);

        }

        [HttpPost]
        public ActionResult Save(ProductCategory userData)
        {
            try
            {
                if (ModelState.IsValid)
                {
                    mt_ProductCategories cat = new mt_ProductCategories { CatCode = userData.CategoryCode, CatName = userData.Name };
                    // TODO: Add insert logic here
                    _db.mt_ProductCategories.Add(cat);
                    _db.SaveChanges();

                    return RedirectToAction("Index");                    
                }

                return View();
            }
            catch
            {
                return View();
            }
        }

        public ActionResult Edit(int id)
        {
            var category = _db.mt_ProductCategories
                            .Where(pc => pc.Id == id)
                            .Select(pc => new ProductCategory 
                            { Id=pc.Id, CategoryCode=pc.CatCode,Name=pc.CatName }).ToList();

            return RedirectToAction("Index", category);
        }
}

Index view

@model IEnumerable<eComm1.Models.ProductCategory>

@using(Ajax.BeginForm("Save", "ProductCategory", 
    new AjaxOptions { 
 HttpMethod="POST", 
 UpdateTargetId="prod-grid", 
 InsertionMode=InsertionMode.Replace,
 OnSuccess="loaddivdata"

}))
{

  <fieldset class="form-group">
    <label for="Code">Category Code</label>
    <input type="text" class="form-control focus" id="Code" name="CategoryCode" placeholder="Product category code" >
  </fieldset>
  <fieldset class="form-group">
    <label for="ProdName">Product Name</label>
    <input type="text" class="form-control" id="ProdName" name="Name" placeholder="Product Name">
  </fieldset>
     <button type="Submit" class="btn btn-primary">Save</button>
}
<hr />
<div id="prod-grid">
    @Html.Partial("_ProductCategoryList", @Model)
</div>


<script type="text/javascript">

    $(function () {
        $('.focus :input').focus();
    });


    function loaddivdata() {        
        $('#prod-grid').html();
        $('#Code, #ProdName').val('');

    };




    //    $('#prod-grid').load(function () {
    //        $.ajax({
    //            url:'ProductCategoryController/Index', 
    //            method:'GET', 
    //            type:'application/html',
    //            success: function () { alert('called');}
    //        });

    //    });
    //});
</script>

Partial View: _ProductCategoryList

@model IEnumerable<eComm1.Models.ProductCategory>

<div class="panel panel-default">


@if (Model.Count() == 0) {   <div class="panel-heading">Product Categories - <span style='color:red;font-weight:bold' >0 RESULTS FOUND</span></div> 
}else{
      <!-- Default panel contents -->
  <div class="panel-heading">Product Categories</div>
}


  <!-- Table -->
  <table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.CategoryCode)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Url)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.CategoryCode)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Url)
        </td>
        <td>
            @*@Html.beActionLink("Edit", "Edit", new { id=item.Id }) |
            @Html.ActionLink("Details", "Details", new { id=item.Id }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.Id })*@

            @Ajax.ActionLink("Edit", "Edit", "ProductCategory", new { id=item.Id}, new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "", OnSuccess = "loadformdata" }) | 
            @Ajax.ActionLink("Delete", "Delete", "ProductCategory", new { id=item.Id}, new AjaxOptions{ HttpMethod="POST", UpdateTargetId="", OnSuccess="loadformdata"}) 

         </td>
    </tr>
}

</table>


</div>

Wie ändere ich meinen Code, um Daten an die Eingabesteuerung zu senden, und wie erstelle ich in meinem Code ein ausgeblendetes Feld für den ID-Wert, damit er an die Aktion "Bearbeiten" (Auflistung, int-ID) gesendet werden kann, um den Datensatz zu aktualisieren?

Für Stephen Muecke habe ich meine JQuery-Dateien durch die Bundles hinzugefügt

public static void RegisterBundles(BundleCollection bundles)
{
    bundles.Add(new ScriptBundle("~/bundles/ecomm").Include(
        "~/Scripts/jquery-{version}.js",
        "~/Scripts/jquery-2.1.4.min.js",
        "~/Scripts/bootstrap.js",
        "~/Scripts/bootstrap.min.js",
        "~/Scripts/jquery.unobtrusive*", 
        "~/Scripts/jquery.validate*"
        ));

    bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                "~/Scripts/jquery-{version}.js"));

    bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                "~/Scripts/jquery-ui-{version}.js"));

    bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                "~/Scripts/jquery.unobtrusive*",
                "~/Scripts/jquery.validate*"));

    // Use the development version of Modernizr to develop with and learn from. Then, when you're
    // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
    bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                "~/Scripts/modernizr-*"));

    bundles.Add(new StyleBundle("~/Content/css").Include(
        "~/Content/bootstrap.min.css",
        "~/Content/bootstrap.css", 
        "~/Content/style.css"));

    bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                "~/Content/themes/base/jquery.ui.core.css",
                "~/Content/themes/base/jquery.ui.resizable.css",
                "~/Content/themes/base/jquery.ui.selectable.css",
                "~/Content/themes/base/jquery.ui.accordion.css",
                "~/Content/themes/base/jquery.ui.autocomplete.css",
                "~/Content/themes/base/jquery.ui.button.css",
                "~/Content/themes/base/jquery.ui.dialog.css",
                "~/Content/themes/base/jquery.ui.slider.css",
                "~/Content/themes/base/jquery.ui.tabs.css",
                "~/Content/themes/base/jquery.ui.datepicker.css",
                "~/Content/themes/base/jquery.ui.progressbar.css",
                "~/Content/themes/base/jquery.ui.theme.css"));
}

In der Teilansicht

    @Ajax.ActionLink("Edit", "Edit", "ProductCategory", new { id = item.Id }, new AjaxOptions { HttpMethod = "GET", OnSuccess = "loadformdata" }) | 
    @Ajax.ActionLink("Delete", "Delete", "ProductCategory", new { id=item.Id}, new AjaxOptions{ HttpMethod="POST", OnSuccess="loadformdata"}) 

in der Indexansicht die folgende js-Funktion:

Funktion loadformdata ()

var cells = $(this).closest('tr').children('td');
alert(cells.eq(0).text());
//$('#Code').val(cells.eq(0).text());
//$('#ProdName').val(cells.eq(1).text());

}

To: Stephen Muecke: Ich habe oben loadformdata () entfernt und alles wie du gesagt hast.dieses Youtube-Video zeigt das Problem, das das Klickereignis immer noch nicht aufruft

To: Steven Meucke: Es gibt immer noch kein Glück, der Einfachheit halber habe ich eine Warnung () in der Funktion hinzugefügt und die Warnung () wird nicht angezeigt.Hier ist das Video

Antworten auf die Frage(4)

Ihre Antwort auf die Frage