How to create Popup Grid
First Create Partial
view using Scaffolding template with list template and named it
"PopupBox.cshtml"
-------------------------------------------------------------------------------------------------------------------------
@model
IEnumerable<Test.Models.tbl_Item>
<style>
.GridTextBox {
width: 100px;
}
</style>
<div
id="Popup" style="display:none;">
<div
class="table-responsive">
<div class="panel-danger">
<div class="col-md-12"
style="margin-top:100px;">
<table class="table">
<tr>
<th>
@Html.DisplayNameFor(model => model.ItemCode)
</th>
<th>
@Html.DisplayNameFor(model => model.ItemName)
</th>
<th>
@Html.DisplayNameFor(model => model.Qty)
</th>
<th></th>
</tr>
@foreach (var item in Model)
{
<tr>
<td>
@Html.TextBox("ser_txtItemCode", item.ItemCode, new {
id = @item.ItemCode + "txtItemCode", @class = "GridTextBox",
@readonly = "readonly" })
</td>
<td>
@Html.TextBox("ser_txtItemName", item.ItemName, new {
id = @item.ItemCode+"txtItemName", @class = "GridTextBox",
@readonly = "readonly" })
</td>
<td>
@Html.TextBox("ser_txtQty", null, new { id = @item.ItemCode+"txtQty",
@class = "GridTextBox" })
</td>
<td>
<button type='button' data-id="@item.ItemCode" class='btn
btn-xs btn-danger' id='btnAdd'>Add</button>
</td>
</tr>
}
</table>
</div>
</div>
</div>
</div>
<script
src="~/Content/Popup_Partial.js"></script>// this is for
popup contain data handell
--------------------------------------------------------------------------------------------------------------------------
Create js file and set reference it to
main form which are working (not a popup partial).add this reference to “Index.cshtml”
<script src="@Url.Content("~/Content/Custom.js")"></script>
--------------------------------------------------------------------------------------------------------------------------
add this div to index.cshtml for render popup
<div id="DivToAppendPartialVoew" style="display:none;">
</div>
//This fore Table which to add Item from popup
<div class="table-responsive" id="tblPanel">
<table class="table" id="DetailGrid">
<tr>
<th>Item Code</th>
<th>Item Code</th>
<th>Order Qty</th>
</tr>
</table>
</div>
finally add this references
<link href="@Url.Content("~/Content/jquery-ui.css")" rel="stylesheet" />
<link href="@Url.Content("~/Content/jquery-ui.theme.css")" rel="stylesheet" />
<link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" />
<script src="@Url.Content("~/Scripts/jquery-1.10.2.js")"></script>
<script src="@Url.Content("~/Content/Custom.js")"></script>
--------------------------------------------------------------------------------------------------------------------------
-------------Custom.js------------------
///// If you use function publically
add it before document.ready()
function showPopup() {
var ph = $("#DivToAppendPartialVoew");//Lord parsal view to
spesific div eliment (#DivToAppendPartialVoew is exsist in Main Page)
ph.load("/Home/PopupBox", function () {
$('#Popup').dialog({
//autoOpen: false,
title: 'Delete Confirm Box',
height: 400,
width: 500,
model: true,
show: { effect: 'fade', duration: 2000 },
open: function () {
$(".ui-widget-header").css("background", "red");
},
buttons: [{
id: 'OK',
text: 'OK',
click: function () {
alert('OK');
}
},
{
text: 'Cancel',
click: function () {
$(this).dialog('close');
}
}]
});
});
}
$(document).ready(function () {
$(".ui-dialog").css("background", "green");// To change popup
colour
$('#Item').on('click', function () {
showPopup();
});
});
--------------------------------------------------------------------------------------------------------------------------
// This is for Popup_Partial.js.
this js reference to Partial view
function
AddPopupGridDataToMasterGrid(_ItemCode, _ItemName, _Qty)
{
var PopupGrid = [];
PopupGrid = {
ItemCode: _ItemCode,
ItemName: _ItemName,
Qty:_Qty
};
$.ajax({
url: '/Home/AddPopupData/' + 1,
data: JSON.stringify({ 'oItem': PopupGrid }),
type: "POST",
contentType: "application/json;charset=utf-8",
dataType: 'json',
success: function (data) {
//alert('added');
$(".ui-widget-content").html("");
debugger;
var serverSideData = JSON.parse(data)
var markup = "<tr>" + "<td>" +
serverSideData.ItemCode + "</td>" + "<td>" +
serverSideData.ItemName + "</td>" + "<td>" + serverSideData.Qty
+ "</td>" + "<td style = 'visibility:hidden;'>" + "0" + "</td>
<td> <button type='button' data-id='" +
serverSideData.ItemCode + "'class='btn btn-xs btn-danger'
id='btnLineDel'>Delete</button></td>" + "</tr>";
$('#tblPanel #DetailGrid').append(markup)//This is way to access another web page element (this is #tblPanel #DetailGrid are ids in in index.cshtml
},
error: function (result) {
alert(result.toString());
}
});
}
$(document).ready(function () {
$('#Popup').on('click', '#btnAdd', function () {
var Qty = 0;
var recordId = "";
var ItemCode = "";
var ItemName = "";
recordId = $(this).data("id");
Qty = $("#" + recordId + "txtQty").val();
ItemCode = $("#" + recordId + "txtItemCode").val();
ItemName = $("#" + recordId + "txtItemName").val();
//alert(recordId
+ " For QTY :" + Qty + ItemName + "(" + ItemCode +
")");
AddPopupGridDataToMasterGrid(ItemCode, ItemName, Qty);
});
});
--------------------------------------------------------------------------------------------------------------------------
// Add these Action method to are to home controller
public ActionResult PopupBox()
{
List<tbl_Item> oDetail = mog.tbl_Item.OrderBy(p => p.ItemCode).ToList<tbl_Item();
return PartialView(oDetail);
}
[HttpPost]
public ActionResult AddPopupData(int id, tbl_Item oItem)
{
try
{
//This is the Way to send json resalt
to server side to client side
var jsonSerialiser = new JavaScriptSerializer();
var json = jsonSerialiser.Serialize(oItem);
return Json(json, JsonRequestBehavior.AllowGet);
}
catch (Exception ex)
{
throw;
}
}
Finally add this js ("~/Scripts/jquery-ui.min.js") to BundleConfig which is located in App_Start folder.
EX:
public class BundleConfig
{
// For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js", "~/Scripts/jquery-ui.min.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css", "~/Content/jquery-ui.css"));
}
}
Comments
Post a Comment