如何将数据发送到同一页面上的编辑框？

时间：2015-12-01 05:45:42

标签： asp.net-mvc-4

我生成了以下页面

enter image description here

当我点击编辑链接时，记录数据必须发送到同一页面上的输入框（不刷新页面）

目前我有控制器代码和视图

controller：ProductCategory 

/bin/sh

索引视图 

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

部分视图：_ProductCategoryList 

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

如何修改我的代码以发送数据输入控件和我的代码如何为Id值创建隐藏字段，以便可以发送到Edit（集合，int id）操作来更新记录？

对于Stephen Muecke，我已经通过捆绑包

添加了我的jquery文件 
@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>

在局部视图中

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

在索引视图中使用以下js函数：

function loadformdata（）{

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

}

致：Stephen Muecke： 我已经删除了上面的loadformdata（）并按照你的说法放置了所有内容。 this youtube video shows仍未调用该点击事件的问题

致：Steven Meucke： 仍然没有运气，为了方便我在功能中添加了一个alert（）并且alert（）不会显示。 Here is the video

2 个答案:

答案 0 :(得分：1)

为您提供“编辑”链接一个类名（例如）class="edit"并处理其.click()事件以更新表单控件

$('.edit').click(function() {
  var cells = $(this).closest('tr').children('td');
  $('#Code').val(cells.eq(0).text());
  $('#ProdName').val(cells.eq(1).text());
  return false; // cancel the default redirect
});

附注：您只需将ActionLink()代码替换为<a href="#" class="edit">Edit</a>，就不需要return false;行。

答案 1 :(得分：0)

为ajax调用编写脚本：

$('#edit').click(function () {
         // var data = {here you will pass item.id }
        $.ajax({
            url:'ProductCategoryController/Edit', 
            data: {id : data}
            method:'GET',
            success: function (data) { 
                   //clear html page here
                   //reload html page by passing 'data' passes in function
             //e.g. suppose html page id is 'xyz' then $("#xyz").html(data)
                  }
        });

    });
相关问题
最新问题