Ajax不使用SQL Server 2008 R2在mvc 5中的部分视图中检索数据

时间:2017-01-18 05:44:26

标签: jquery ajax asp.net-mvc asp.net-mvc-5

这是我的HTML:

@model ModalPopupMVC.Models.User
@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("View All", "Index")

    @using (Html.BeginForm("Search", "Home", FormMethod.Post))
    {
        <table>
            <tr>
                <td>
                    <input type="text" id="txtName" name="searchparam" placeholder="type here to search" />
                </td>
                <td>
                    <input type="submit" id="btnSubmit" value="Search" />
                </td>
            </tr>
        </table>
    }

</p>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.FName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.LName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.location)
        </th>
        <th></th>
    </tr>

    @foreach (var item in Model.emp1)
    {
        <tr>
            <td>
                @Html.DisplayFor (modelItem =>item.FName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.LName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.location)
            </td>
            <td>

<a href="javascript:void(0);" class="anchorDetail" data-id="@item.Entryid">
Details
</a>

            </td>
        </tr>
    }

</table>
<div id='myModal' class='modal'>
    <div class="modal-dialog">
        <div class="modal-content">
            <div id='myModalContent'></div>
        </div>
    </div>

</div>

以下是我的脚本:

@section scripts
{
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/bootstrap.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script>

    var TeamDetailPostBackURL = '/Home/Details';
    $(function () {
        $(".anchorDetail").click(function () {
            debugger;
            var $buttonClicked = $(this);
            var id = $buttonClicked.attr('data-id');
            var options = { "backdrop": "static", keyboard: true };
            $.ajax({
                type: "GET",
                url: TeamDetailPostBackURL,
                contentType: "application/json; charset=utf-8",
                data: { "Id": id },
                datatype: "json",
                success: function (data) {
                    debugger;

                    $('#myModalContent').html(data);
                    $('#myModal').modal(options);
                    $('#myModal').modal('show');

                },
                error: function () {
                    alert("Dynamic content load failed.");
                }
            });
        });
        //$("#closebtn").on('click',function(){
        //    $('#myModal').modal('hide');

        $("#closbtn").click(function () {
            $('#myModal').modal('hide');
        });
    });

    </script>

} 

这是我的控制器:

public class HomeController : Controller
{
        DataSet ds = new DataSet();
        DataAccess objda = new DataAccess();

        [HttpGet]
        public ActionResult Index()
        {
            User emp = new User();
            emp.Action = 4000;
            ds = objda.getData(emp);

            var bList = new List<User>();
            {
                foreach (DataRow dr in ds.Tables[0].Rows)
                {
                    bList.Add(new User
                    {
                        Entryid = Convert.ToInt32(dr[0]),
                        sno = dr[0].ToString(),
                        FName = dr[2].ToString(),
                        LName = dr[3].ToString(),
                        location = dr[4].ToString(),
                        email = dr[5].ToString(),
                    });

                }
            }
            emp.emp1 = bList;
            return View("Index", emp);
        }

        [HttpGet]
        public ActionResult Details(int Id)
        {
            User usr = new User();
            usr.Entryid = Id;
            usr.Action = 4002;
            ds = objda.getData(usr);

            var bList = new List<User>();
            {
                foreach (DataRow dr in ds.Tables[0].Rows)
                {
                    bList.Add(new User
                    {
                        Entryid = Convert.ToInt32(dr[0]),
                        sno = dr[0].ToString(),
                        FName = dr[2].ToString(),
                        LName = dr[3].ToString(),
                        location = dr[4].ToString(),
                        email = dr[5].ToString(),
                    });

                }
            }
            usr.emp1 = bList;
            return PartialView("_Details", usr);
        } 
}

//这是我的部分视图

<div>

    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title" id="myModalLabel">Edit User</h4>
    </div>
    @foreach (var MenuItem in Model.emp1)
    {
        <div class="modal-body">
            @using (Html.BeginForm())
            {
                @Html.ValidationSummary(true)

                @Html.AntiForgeryToken()

                <div>
                    @Html.EditorFor(model => model.FName, new { htmlAttributes = new { placeholder = "First name", @Value = MenuItem.FName, @Class = "editor-field" } })
                    @Html.ValidationMessageFor(model => model.FName)
                </div>

                <div>
                    @Html.EditorFor(model => model.LName, new { htmlAttributes = new { placeholder = "Last name", @Value = MenuItem.LName, @Class = "editor-field" } })
                </div>
            <div>
                @Html.EditorFor(model => model.email, new { htmlAttributes = new { placeholder = "Email id", @Value = MenuItem.email, @Class = "editor-field" } })
                @Html.ValidationMessageFor(model => model.email)
            </div>
                <div>
                    @Html.EditorFor(model => model.location, new { htmlAttributes = new { placeholder = "Address", @Value = MenuItem.location, @Class = "editor-field" } })
                    @Html.ValidationMessageFor(model => model.location)
                </div>

            }
            <div class="modal-footer">
                <button type="button" class="btn btn-info">Save Changes</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    }
</div>

在我的代码中,我使用ajax调用部分视图,但是当我单击用户详细信息链接时,不会通过ajax检索该用户的描述,它会显示一个空白引导模式弹出窗口。

我正在检索用户在同一页面上选择的用户的详细信息,但未检索到该用户。请提出任何建议问题,因为我是ASP.NET MVC 5的新手。

由于

1 个答案:

答案 0 :(得分:0)

我怀疑你正在构建的网址是不正确的。尝试删除contentTypedatadataType参数,并使用格式为{controller}/{action}/{id}的网址,这是我认为您的路由引擎已配置为支持:

var TeamDetailPostBackURL = '@Url.Action("Details", "Home")';
$(".anchorDetail").click(function () {
    debugger;
    var $buttonClicked = $(this);
    var id = $buttonClicked.attr('data-id');
    var options = { "backdrop": "static", keyboard: true };
    $.ajax({
        type: "GET",
        url: TeamDetailPostBackURL + '/' + id,
        success: function (data) {
            debugger;

            $('#myModalContent').html(data);
            $('#myModal').modal(options);
            $('#myModal').modal('show');
        },
        error: function () {
            alert("Dynamic content load failed.");
        }
    });
});

还可以使用浏览器开发人员工具栏检查发送到服务器的AJAX请求和实际响应。这样您就可以更轻松地调试代码问题。