Question

我试图将Json数据传递给bootstrap模式窗口。一般来说，我想做Edit选项。这是我的代码：

<body>
    <p>@Html.ActionLink("GetId", "Edit", "Home", new { id = "1" }, new { @class = "myLink" })</p>

    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Modal title</h4>
                </div>
                <div class="modal-body">
                    <p><b>Message:</b><br>
                    <input class="message-edit-text" type="text" size="20">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</body>

 $(document).ready(function () {
        $(".myLink").click(function () {
            $.ajax({
                url: "Home/Edit/1",
                type: "GET",
                dataType: "json"
            }).done(function (data){
                $(".message-edit-text").val(data.message);
           });
            $('#myModal').modal('show')
        });
    });

这是back-end部分：

[HttpGet]
        public ActionResult Edit(int id)
        {
            List<VacationRequest> list = new List<VacationRequest>()
            {
                new VacationRequest() {ID = 1, Message = "defre"},
                new VacationRequest() {ID = 2, Message = "defre"},
                new VacationRequest() {ID = 3, Message = "defre"},
                new VacationRequest() {ID = 4, Message  ="defre"},
                new VacationRequest() {ID = 5, Message ="defre"},
                new VacationRequest() {ID = 6, Message ="defre"},
                new VacationRequest() {ID = 7, Message ="defre"},
                new VacationRequest() {ID = 8, Message ="defre"},
                new VacationRequest() {ID = 9, Message ="defre"},
                new VacationRequest() {ID = 10, Message ="defre"},
                new VacationRequest() {ID = 11, Message ="defre"},
                new VacationRequest() {ID = 12, Message ="defre"},
                new VacationRequest() {ID = 13, Message ="defre"},
                new VacationRequest() {ID = 14, Message ="defre"}
            };

            var model = list.FirstOrDefault(x => x.ID == id);

            return Json(new { Id = model.ID, message = model.Message }, JsonRequestBehavior.AllowGet);
        }

这只是一个实验。我需要在没有partial view的情况下这样做。我究竟做错了什么？

Answer 1

我使用了与您完全相同的代码并创建了这个小提琴 - https://dotnetfiddle.net/DdYQhf

型号

using System;
using System.ComponentModel.DataAnnotations;

namespace HelloWorldMvcApp
{
    public class VacationRequest
    {
        public int ID
        {
            get;
            set;
        }

        public string Message
        {
            get;
            set;
        }
    }
}

控制器 -

using System;
using System.Web.Mvc;
using System.Collections.Generic;

namespace HelloWorldMvcApp
{
    public class HomeController : Controller
    {
        public ActionResult Index(){
            return View();
        }

       [HttpGet]
        public ActionResult Edit(int? id)
        {
           List<VacationRequest> list = new List<VacationRequest>()
            {
                new VacationRequest() {ID = 1, Message = "defre"},
                new VacationRequest() {ID = 2, Message = "defre"},
                new VacationRequest() {ID = 3, Message = "defre"},
                new VacationRequest() {ID = 4, Message  ="defre"},
                new VacationRequest() {ID = 5, Message ="defre"},
                new VacationRequest() {ID = 6, Message ="defre"},
                new VacationRequest() {ID = 7, Message ="defre"},
                new VacationRequest() {ID = 8, Message ="defre"},
                new VacationRequest() {ID = 9, Message ="defre"},
                new VacationRequest() {ID = 10, Message ="defre"},
                new VacationRequest() {ID = 11, Message ="defre"},
                new VacationRequest() {ID = 12, Message ="defre"},
                new VacationRequest() {ID = 13, Message ="defre"},
                new VacationRequest() {ID = 14, Message ="defre"}
            };

            var model = list.Find(x => x.ID == id);
            return Json(new { Id = model.ID, message = model.Message }, JsonRequestBehavior.AllowGet);
        }
    }
}

HTML -

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

</head>


<body>
    <p>@Html.ActionLink("GetId", "Edit", "Home", new { id = "1" }, new { @class = "myLink" })</p>
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Modal title</h4>
                </div>
                <div class="modal-body">
                    <p><b>Message:</b><br>
                    <input class="message-edit-text" type="text" size="20">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</body>

<script>
     $(".myLink").click(function(e) {
           $.ajax({
                url: '@Url.RouteUrl(new{ action="Edit", controller="Home"})',
                data: {id: 2},
                type: 'GET',
                dataType: 'json',
                contentType: "application/json; charset=utf-8",
                success: function(data) {
                        $(".message-edit-text").val(data.message);
                }});
    $('#myModal').modal('show');
    e.preventDefault();     
        });
</script>

输出

enter image description here

将Json数据从操作传递到bootstrap模式窗口

1 个答案: