Question

视图

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<fieldset>
    <br />
    <br />
    <br />

     <div align="center">

     @{

        @(Html.Telerik().Grid<SmartTrack.Web.DAL.SysUserList>()
        .DataBinding(dataBinding => dataBinding.Ajax().Select("Index", "User"))
        .Name("UserList")
        .DataKeys(keys => keys
            .Add(c => c.UserName)
            .RouteKey("UserName"))
        .Columns(columns =>
        {
            columns.Bound(o => o.UserName).Width(100);
            columns.Bound(o => o.FirstName).Width(200);
            columns.Bound(o => o.LastName).Width(250);
            columns.Bound(o => o.Active).ClientTemplate("<input type='checkbox' disabled='disabled' name='Active' <#=Active? checked='checked' : '' #> />").Width(70).HtmlAttributes(new { style = "text-align:center" }); ;


        })
        .Pageable(pagerAction => pagerAction.PageSize(20))
        .Sortable()
        .Selectable()
        .Scrollable()
        .Groupable()
        .Filterable()
        .HtmlAttributes(new { style = "width:50%;" })
       )
         }
       </div>
       <br/>
       <div align="center">
        <table>
        <tr>
        <td>
            <button id="btnAdd" type="submit" style="height:40px;width:70px" ">Add</button>
            </td>
            <td>
            <button style="height:40px;width:70px" ">Edit</button>
            </td>
            <td>
            <button style="height:40px;width:70px" ">Delete</button>
            </td>
        </tr>
        </table>   
       </div>
       </fieldset>

<script type="text/javascript">
    $(function () {
        $('#btnAdd').click(function () {
            $.ajax({
            type: "POST",
            url: '@Url.Action("Create","User")',
            success: function (result) {
                $('#cuscreate').html(result)
            }
            });
        });
    });
    </script>

此视图包含一个脚本，单击添加按钮时，将从该脚本调用UserController Create方法

控制

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using SmartTrack.Web.Attributes;
using SmartTrack.Web.Models;
using SmartTrack.Web.DAL;
using Telerik.Web.Mvc;
namespace SmartTrack.Web.Controllers
{
    public class UserController : Controller
    {
        SMARTTrackerEntities db = new SMARTTrackerEntities();

        //
        // GET: /User/
        [GridAction]
        public ActionResult Index()
        {
            //ViewData["UserGroup"] = DisplayContentEngine.getUserGroupList();

            return View(new GridModel(UserListEngine.getAllSystemUser()));
        }

        [HttpPost] 
        public ActionResult Create()
        {

            ViewData["Location"] = DisplayContentEngine.getLocationList();
            ViewData["Branch"] = DisplayContentEngine.getBranchList();
            //var v = ViewData.Model = UserListEngine.getAllSystemUser();
            var user = new SysUserList();

            return View(user);
        }

        [HttpPost]
        public ActionResult Create(SysUserList user)
        {
            try
            {
                // TODO: Add insert logic here
                if (ModelState.IsValid)
                {

                    //Save Registration
                    db.SysUserLists.AddObject(user);
                    db.SaveChanges();

                    return RedirectToAction("Index");
                }
                return View(user);
            }
            catch
            {
                return View();
            }

        }

        public ActionResult Edit(string username)
        {
            SysUserList sysuserlist = db.SysUserLists.Single(s => s.UserName == username);
            return View(sysuserlist);

        }
    }
}

这个名为

的控制器

创建视图

@model SmartTrack.Web.DAL.SysUserList

@{
    ViewBag.Title = "Create";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Create</h2>


@using (Html.BeginForm())
{
    <div id="cuscreate">
        <fieldset>

        <table>
            <tr>
                <td>
                    <label>First Name</label>
                </td>
                <td>
                    @Html.TextBoxFor(model => model.FirstName)
                </td>
                <td>
                    <label>Last Name</label>
                </td>
                <td>
                    @Html.TextBoxFor(model => model.LastName)
                </td>
            </tr>
            <tr>
                <td>
                    <label>User Name</label>
                </td>
                <td>
                    @Html.TextBoxFor(model => model.UserName)
                </td>
                <td>
                    <label>Password</label>
                </td>
                <td>
                    @Html.PasswordFor(model => model.userPwd)
                </td>
            </tr>
            <tr></tr>
            <tr>
                <td>
                    <label>Location</label>
                </td>
                <td>
                    @(Html.Telerik().DropDownList()
                    .Name("ddLocation")
                    .BindTo((IEnumerable<DropDownItem>)ViewData["Location"])
                    .CascadeTo("ddlBranch")
                    )
                </td>
                <td>
                     <label>Branch</label>
                </td>
                <td>
                    @(Html.Telerik().DropDownList()
                    .Name("ddlBranch")
                    .BindTo((IEnumerable<DropDownItem>)ViewData["Branch"])
                    )
                </td>
            </tr>

        </table>


        </fieldset>
    </div>
}

当点击添加按钮时，没有任何事情可以告诉我我的问题是什么？

提前致谢

此致库尔特

Answer 1

我无法在你的HTML中看到表单标签，这可能是它不知道在哪里发布的原因

带有操作链接的视图Create New和telerik网格中没有表单标签

Answer 2

您的ajax请求中没有数据元素，因此您不会发布任何内容。

如果您想从表单中获取数据，可以使用.serialize（）：

$.ajax({
    type: "POST",
    data: $('form').serialize(),
    url: '@Url.Action("Create","User")',
    success: function (result) {
        $('#cuscreate').html(result)
    }
});

请注意，只有才会在页面上显示，否则您应该使用其他选择器，但您明白了。

来自HatSoft的回答
更新（upvote it！）：

通常在你的标签内你应该有标签，在MVC中这样做：

<fieldset> @using(Html.BeginForm()) { <p>your form</p> } </fieldset>

Answer 3

确保通过从点击处理程序返回false来取消提交按钮的默认操作，以便让您的AJAX调用有机会执行：

<script type="text/javascript">
    $(function () {
        $('#btnAdd').click(function () {
            $.ajax({
                type: "POST",
                url: '@Url.Action("Create", "User")',
                success: function (result) {
                    $('#cuscreate').html(result)
                }
            });
        });

        return false; // <!-- That's the important bit
    });
</script>

Answer 4

在纠正我的问题时，我必须修改我的索引视图以包含div id = cuscreate，这导致CreateUser视图显示

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>

<div id="cuscreate" align="center">
 <fieldset>
    <br />
    <br />
    <br />


      @using (Html.BeginForm())
      {
        //@{

        @(Html.Telerik().Grid<SmartTrack.Web.DAL.SysUserList>()
        .DataBinding(dataBinding => dataBinding.Ajax().Select("Index", "User"))
        .Name("UserList")
        .DataKeys(keys => keys
            .Add(c => c.UserName)
            .RouteKey("UserName"))
        .Columns(columns =>
        {
            columns.Bound(o => o.UserName).Width(100);
            columns.Bound(o => o.FirstName).Width(200);
            columns.Bound(o => o.LastName).Width(250);
            columns.Bound(o => o.Active).ClientTemplate("<input type='checkbox' disabled='disabled' name='Active' <#=Active? checked='checked' : '' #> />").Width(70).HtmlAttributes(new { style = "text-align:center" }); ;


        })
        .Pageable(pagerAction => pagerAction.PageSize(20))
        .Sortable()
        .Selectable()
        .Scrollable()
        .Groupable()
        .Filterable()
        .HtmlAttributes(new { style = "width:50%;" })
       )}


 </fieldset>  
       <br/>
       <div align="center">
        <table>
        <tr>
        <td>
            <button id="btnAdd" type="submit" style="height:40px;width:70px" ">Add</button>
            </td>
            <td>
            <button style="height:40px;width:70px" ">Edit</button>
            </td>
            <td>
            <button style="height:40px;width:70px" ">Delete</button>
            </td>
        </tr>
        </table>   
       </div>
  </div>     



    <script type="text/javascript">
        $(function () {
            $('#btnAdd').click(function () {
                $.ajax({
                    type: "POST",
                    data: $('form').serialize(),
                    url: '@Url.Action("CreateUser", "User")',
                    success: function (result) {
                        $('#cuscreate').html(result)
                    }
                });
            });

            return false; // <!-- That's the important bit 
        }); 
</script>

非常感谢您的帮助

此致库尔特

按钮单击事件不执行任何操

视图

控制

创建视图

4 个答案: