如何将ID传递到控制器并以相同的视图显示在模态上

时间:2018-06-19 17:42:08

标签: c# asp.net asp.net-mvc

我有一个由控制器填充的数据表: enter image description here

控制器

public ActionResult Index()
{
    vm = new RIROViewModel();
    vm.RIROUsers = new List<ResourceViewModel>();

    foreach (var user in db_RIRO.sp_GetAllRIRORoster())
    {
        vm.RIROUsers.Add(new ResourceViewModel()
        {
            EID = user.EID,
            FirstName = user.FirstName,
            LastName = user.LastName,
            EmployeeType = user.EmployeeType,
            ProjectName = user.ProjectName,
            JobTitle = user.JobTitle,
            Level = user.CareerLevel,
            ACNRollOn = user.HireDate,
            ManagerName = user.Manager,
            LeadName = user.Supervisor,
            UserID = user.UserID,
            RollTypeValue = user.RollTypeValue
        });
    }
    return View(vm);
}

查看

@model OnlineRIRO.ViewModel.RIROViewModel

@foreach (var user in Model.RIROUsers)
{
    <tr>
        <td class="text-center">@(user.FirstName + " " + user.LastName)</td>
        <td class="text-center">@user.EID</td>
        <td class="text-center">@user.ACNRollOn</td>
        <td class="text-center">@(user.Level + " - " + user.JobTitle)</td>
        <td class="text-center">@user.EmployeeType</td>
        <td class="text-center">Sample</td>
        <td class="text-center">@user.LeadName</td>
        <td class="text-center">@user.ManagerName</td>
        <td class="text-center">@user.RollTypeValue</td>
        <td class="text-center">***</td>
        <td class="text-center">***</td>
        <td class="text-center">***</td>
        <td>
            <a href="@Url.Action("GetDetails", "RIRO", new { id = user.UserID })"
               class="btn btn-xs btn-primary details" data-toggle="modal"
               data-target="#exampleModal1" data-id="@user.UserID">View Details</a>
        </td>
    </tr>
}

现在,当我单击View Details按钮时,我希望所选项目的详细信息显示在模式上:

<!-- Modal -->
<div class="modal fade" id="exampleModal1" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-body">
            <div class="row">
                <div class="col-md-10 col-md-offset-1">
                    <div class="form-group col-md-4 col-md-offset-2">
                        <label for="">* EID</label>
                        <input type="text" class="form-control input-sm" value="">

                        <label for="">* Lead Name</label>
                        <input type="text" class="form-control input-sm" value="">

                        <label for="">* Manager Name</label>
                        <input type="text" class="form-control input-sm" value="">

                    </div>
                </div>
            </div>
        </div> 
    </div>
</div>
</div>

这是我尝试过的代码:

public ActionResult GetDetails(int id)
{
    sp_GetUserDetails_Result result = db_RIRO.sp_GetUserDetails(id).FirstOrDefault();
    ViewData["EID"] = result.EID;

    return View(result);
}

我正在使用存储过程sp_GetUserDetails,该存储过程接受id的一个参数。如何将存储过程的结果传递给同一视图上的模式?

1 个答案:

答案 0 :(得分:0)

将Modal创建为局部视图。 更改您的tag元素,以撰写JavaScript帖子。 在您的帖子请求中将@userId变量作为参数传递。 用控制器中的数据填充模态。 返回局部视图。 将局部视图插入容器中。 将容器显示为模态。

[控制器]

public ActionResult GetModalPartialView(long UserId){
 //map your db result to a view model.
 var model = db_RIRO.sp_GetUserDetails(id).FirstOrDefault();
 //return your view
 return view("~/Views/Shared/_Modal.cshtml",model);
}

[HTML]

<a href="#" onclick="getDataAndShowView(@UserId)">View Modal</a>
<div id="modal-container" style=display:none;></div>

[Javascript]

function getDataAndShowView(UserId){
 var data = {
   UserId : UserId;
 };
 $.post("@Url.Action("GetModalPartialView","Controller")",data,function(resp){
    $("#modal-container").html(resp);
    $("#modal-container").modal("show");
 });
}