显示控制器的模式弹出div [英] Display a modal popup div from controller
问题描述
请有人在这里帮我吗?谢谢！
Can please someone help me here?! Thank you!
我有一个视图，显示一个产品列表以及每个产品的添加产品"按钮.我为每个添加产品"单击调用CreateNewProduct方法以查找产品的状态.根据状态，我需要保持相同的视图，还是需要调用模式弹出窗口.我可以通过在其他视图中创建模式弹出窗口来做到这一点.但是我想从显示产品列表的同一视图中调用模式弹出div(也传递模式).这可能吗?
I have a view that displays a list of products along with an "Add Product" button for each. I am calling the CreateNewProduct method for each "Add Product" click to find the status of the product. Depending on the status, either I need to stay on the same view or I need to call a modal popup. I am able to do this by creating a modal popup in a different view. But I want to call the modal popup div (also pass the modal) from the same view where it displays a list of products. Is this possible?
public ActionResult CreateNewProduct(int productId)
{
var sharedProduct = _productTemplateService.GetSharedProducts(productId);
var _finalSharedProducts = (sharedProduct.Any(t => t.productId != productId));
if (_finalSharedProducts)
{
var sharedProdctTemplate = _productTemplateService.GetSharedProduct(productId);
return View("ModalView", new SharedModel
{
SharedProduct = sharedProdctTemplate
});
}
else
{
_productTemplateService.CreateNewProduct(productId);
return RedirectToAction("Details", "ProductTemplate");
}
}
模型查看代码
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Shared Product</h4>
</div>
<div class="modal-body">
<div class="flex-row">
<div class="col-6">
<div class="d-flex flex-row">
<div class="p-2">Product ID</div>
<div class="p-2">Product Types</div>
<div class="p-2">Status</div>
</div>
@foreach (var productTemplate in Model.SharedProduct )
{
<div class="d-flex flex-row">
<div class="p-2">@productTemplate.ProductId</div>
<div class="p-2">@productTemplate.ProductType</div>
<div class="p-2">@productTemplate.StatusCode</div>
</div>
}
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<p>
@Html.ActionLink("Edit", "Edit", new { /* id = Model.PrimaryKey */ }) |
@Html.ActionLink("Back to List", "Index")
</p>
<script type="text/javascript">
$(document).ready(function () {
$('#myModal').modal('show');
});
</script>
更新: 我让它工作了.这就是我所做的.最后，我提到了我面临的问题.
UPDATE: I made it working. This is what I did. At the end, I have mentioned issues I am facing.
主视图中的链接，模式和脚本-详细视图(从ProductTemplate Controller调用)
Link, modal and script in my main view - Detail View (called from ProductTemplate Controller)
<td><a href="#" class="btn btn-sm btn-primary" onclick="loadModal('@productTemplate.productId,'@productTemplate.customerId')">Add New Product</a></td>
<div class="modal fade" id="mymodel" role="dialog" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Shared Products</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body" id="mymodelbody">
</div>
</div>
</div>
<script>
var loadModal = function (productId, customerId) {
$.ajax({
type: 'GET',
url: '/NewProductTemplate/CreateNewProduct',
cache: false,
data: {
productId: productId,
customerId: customerId
},
dataType: 'html',
success: function (data) {;
$("#mymodelbody").html(data);
$("#mymodel").modal("show");
}
});
}
</script>
NewProductTemplateController代码
NewProductTemplateController Code
public ActionResult CreateNewProduct(Guid productId, Guid customerId)
{
var sharedProduct = _productTemplateService.GetSharedProducts(productId);
var _finalSharedProducts = (sharedProduct.Any(t => t.productId != productId));
if (_finalSharedProducts)
{
var sharedProdctTemplate = _productTemplateService.GetSharedProduct(productId);
return PartialView("_shared", new SharedModel
{
SharedProduct = sharedProdctTemplate
});
}
else
{
_productTemplateService.CreateNewProduct(productId);
return RedirectToAction("Details", "ProductTemplate");
}
}
部分视图_shared.view代码
Partial view _shared.view code
@model SharedModel
@using (Html.BeginForm("ShareProduct", "NewProductTemplate", FormMethod.Post))
{
@Html.AntiForgeryToken()
<div class="flex-row">
<div class="col-6">
<div class="d-flex flex-row">
<div class="p-2">Product ID</div>
<div class="p-2">Product Types</div>
<div class="p-2">Status</div>
</div>
@for (var i = 0; i < Model.SharedProducts.Count(); i++)
{
@Html.HiddenFor(model => model.SharedProducts.ElementAt(i).ProductId)
@Html.HiddenFor(model => model.SharedProducts.ElementAt(i).CustomerId)
@Html.HiddenFor(model => model.SharedProducts.ElementAt(i).ProductType)
@Html.HiddenFor(model => model.SharedProducts.ElementAt(i).StatusCode)
@Html.HiddenFor(model => model.SharedProducts.ElementAt(i).IsShared)
<div class="d-flex flex-row">
<div class="p-2">@Html.DisplayFor(model => model.SharedProducts.ElementAt(i).ProductId)</div>
<div class="p-2">@Html.DisplayFor(model => model.SharedProducts.ElementAt(i).ProductType)</div>
<div class="p-2">@Html.DisplayFor(model => model.SharedProducts.ElementAt(i).StatusCode)</div>
@if (Model.SharedProducts.ElementAt(i).StatusCode == VersionStatus.PUBLISHED)
{
<div class="p-2">@Html.EditorFor(m => m.SharedProducts.ElementAt(i).IsShared)</div>
}
</div>
}
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-sm btn-primary" />
<button type="button" class="btn btn-sm btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
问题: 1)当我将提交按钮保存在模式弹出窗口(局部视图)中时，它将从NewProductTemplate控制器调用ShareProduct方法.由于某种原因，模型SharedModel的SharedProducts属性在获取控制器代码时为null.您能在这里帮助我为什么它为空吗?
PROBLEM: 1) When I save submit button in modal pop-up (partial view), it calls ShareProduct method from NewProductTemplate controller. For some reason, model SharedModel's SharedProducts property is null when it gets to controller code. Can you please help me here why it gets null?
public ActionResult ShareProduct (SharedModel shareModel)
{
//Access ShareProducts from shareModel
return RedirectToAction("Details", "ProductTemplate");
}
问题: 2)我只想在共享产品时才加载弹出窗口，否则我只想重定向到NewProductTemplate控制器的CreateNewProduct方法中提到的详细信息"视图.问题是，如果不共享产品，它也会在弹出窗口中加载详细信息"视图，因为这是我的脚本正在执行的操作.在显示模式弹出窗口之前，有什么方法可以在成功"功能中检查数据?如果data/html包含共享文本，我想加载普通的详细信息"视图.我只是假设.我试图这样做，但没有成功.
PROBLEM: 2) I want to load popup only if the product is shared, otherwise I just want to redirect to Detail view as mentioned in NewProductTemplate controller's CreateNewProduct method. Problem is that it loads Detail view also in popup if product is not shared since that's what my script is doing. Is there any way that I can check data in Success function before showing modal popup? If data/html contains Shared text, I would like to load the normal Detail view. I am just assuming. I tried to do so but with no success.
ProductTemplate控制器中的详细信息方法
Detail method in ProductTemplate Controller
public ActionResult Details()
{
var productTemplate = _productTemplateService.GetAllProducts(User);
return View(new DetailsModel
{
ProductTemplate = productTemplate,
});
}
推荐答案
(这适用于Bootstrap 3.3.7，希望它与您所使用的版本有关) 我通过从主视图中弹出客户端上的模式来处理此问题.弹出模式的链接包含指向控制器方法的URL，该控制器方法将呈现实际的内容(在您的情况下为产品列表).该控制器方法应返回局部视图.
(This is for Bootstrap 3.3.7 Hopefully it's relevant for the version you're on) I handle this by popping open the modal on the client side from my main view. The link that pops the modal contains the URL to the controller method that will render the actual contents (list of products, in your case). This controller method should return a partial view.
主视图中的模态:
<div class="modal fade name-of-my-modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content"></div>
</div>
</div>
主视图中的链接:
<a class="btn btn-default btn-xs" data-toggle="modal" data-target=".name-of-my-modal" role="button" href="/SomeController/SomeMethodThatReturnsPartialView/234">Show Modal</a>
我的局部视图控制器方法:
My controller method for the partial view:
public ActionResult SomeMethodThatReturnsPartialView(int id)
{
var model = GetProducts();
return PartialView("_IndexPartial", model);
}
我的局部视图将填充实际的模态内容:
My partial view that will populate the actual modal contents:
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Title goes here</h4>
</div>
<form class="form-horizontal" id="SomeId" name="SomeName" role="form">
<div class="modal-body">
<div>Product 1</div>
<div>Product 2</div>
<div>Product 3</div>
<div>Product 4</div>
</div>
</form>
此外，如果模态的内容经常更改，或者是基于传递给部分控制器方法的ID可变的，那么在关闭模态内容时，您将希望清除它.从您的主要观点来看:
Also, if the contents of the modal change frequently, or are variable based upon the ID you pass to the partial controller method, then you'll want to clear the modal contents when closing it. From your main view:
$(document).on('hidden.bs.modal', '.modal', function (e) {
// Handles the event thrown when a modal is hidden
$(this).removeData('bs.modal');
$(this).find(".modal-content").empty();
});
让我知道这是否有帮助，是否需要澄清.
Let me know if this helps, and whether anything needs to be clarified.
这篇关于显示控制器的模式弹出div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
