Bootsrap popup not working on indexing in webgrid in MVC
Summary of the problem I am having:
i m using bootstrap modal to show popup, but its working only on 1st page of webgrid, when i click on another page, then popup not working.
My code:
mediaEntities DB = new mediaEntities();
// GET: News
// GET: /News/
public ActionResult Index(string filter = null,int page=1, int pageSize = 5, string sort = "ID", string sortdir = "DESC")
{
var records = new PagedList<tbl_News>();
ViewBag.filter = filter;
records.Content = (from c in DB.tbl_News
join d in DB.tbl_Category on c.CategoryID equals d.Id
select new G_News()
{
ID = c.ID,
Description = c.Description,
Date = c.Date,
Status = c.Status,
City = c.City,
CategoryName = d.CategoryName
}).Where(x => filter == null ||
(x.Description.Contains(filter))
|| x.Status.Contains(filter)
|| x.City.Contains(filter)
)
.OrderBy(sort + " " + sortdir)
.Skip(((page) - 1) * pageSize)
.Take(pageSize)
.ToList();
// Count
records.TotalRecords = DB.tbl_News
.Where(x => filter == null ||
(x.Description.Contains(filter)) || x.Status.Contains(filter) || x.City.Contains(filter)).Count();
records.CurrentPage = (page);
records.PageSize = pageSize;
return View(records);
}
// GET: /News/Details/5
[HttpGet]
public ActionResult Details(int id = 0)
{
tbl_News news = DB.tbl_News.Find(id);
if (news == null)
{
return HttpNotFound();
}
return PartialView("Details", news);
}
view side code......
@model News4MediaSite.Models.PagedList<News4MediaSite.Models.G_News>
@{
/**/
ViewBag.Title = "Index";
Layout = "~/Views/Shared/DashBoardLayOut.cshtml";
}
@*<h2>Show News</h2>*@
<div class="content-wrapper">
<section class="content-header">
<h1>
News
<small>@*Preview*@</small>
</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> Admin</a></li>
<li class="active">News</li>
</ol>
</section>
<section class="content">
<div class="well">
@using (Html.BeginForm("index", null, FormMethod.Get))
{
<div class="row">
<div class="col-sm-8">
<div class="input-group">
<input type="text"
name="filter"
value="@ViewBag.filter"
class="form-control"
style="display: inline"
placeholder="Search by Description, Status and City" />
<span class="input-group-btn">
<button class="btn btn-default" type="submit">Go</button>
</span>
</div>
</div>
<div class="pull-right col-lg-1">
<a class="btn btn-success" data-modal="" href="/News/Create" id="btnCreate">
<span class="glyphicon glyphicon-plus"></span>
</a>
</div>
</div>
<div style="margin-top:17px;">
@{
var grid = new WebGrid(
canPage: true,
rowsPerPage: Model.PageSize,
canSort: true,
ajaxUpdateContainerId: "grid");
grid.Bind(Model.Content, rowCount: Model.TotalRecords, autoSortAndPage: false);
grid.Pager(WebGridPagerModes.All);
@grid.GetHtml(htmlAttributes: new { id = "grid" }, // id for ajaxUpdateContainerId parameter
fillEmptyRows: false,
tableStyle: "table table-bordered table-hover",
mode: WebGridPagerModes.All,
columns: grid.Columns(
grid.Column("ID", "ID"),
grid.Column("Description", "Description", style: "col-lg-4"),
grid.Column("Date", "Date", style: "col-lg-3"),
grid.Column("Status", header: "Status"),
grid.Column("City", header: "City"),
grid.Column("CategoryName", header: "Category"),
grid.Column(header: "Action", canSort: false, style: "action",
format: @<text>
@Html.Raw("<a data-toggle='modal' data-target='#myModal' href='/News/details/" + item.ID + "' id='" + item.ID + "' title='Detail'> <span class='glyphicon glyphicon-search'> </span> </a>")
@Html.Raw("<a data-toggle='modal' data-target='#myModal' href='/News/edit/" + item.ID + "' id='" + item.ID + "' title='Edit'> <span class='glyphicon glyphicon-edit'> </span> </a>")
@Html.Raw("<a data-toggle='modal' data-target='#myModal' href='/News/delete/" + item.ID + "' id='" + item.ID + "' title='Delete'> <span class='glyphicon glyphicon-trash'> </span> </a>")
</text>)
));
}
</div>
}
</div>
</section>
</div>
<!-- modal placeholder-->
<div id='myModal' class='modal fade in'>
<div class="modal-dialog">
<div class="modal-content">
<div id='myModalContent'></div>
</div>
</div>
</div>
@section scripts{
@Scripts.Render("~/scripts/appjs/phones.js")
}
}
///
details view..
@model News4MediaSite.News4MediaRepository.tbl_News
@{
ViewBag.Title = "Details";
//Layout = "~/Views/Shared/DashBoardLayOut.cshtml";
}
<h2> News</h2>
@*@using (Html.BeginForm("Index", "Publish", FormMethod.Post))*@
@using (Html.BeginForm())
{
<div class="well">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
@*<h3 class="modal-title">News Detail</h3>*@
@{
<small> @Html.ValueFor(m => m.Date) </small> <small>Status(</small>
<b> @Html.ValueFor(m => m.Status)</b><small>)</small>
}
</div>
<div class="modal-body">
@Html.HiddenFor(m => m.ID)
<div class="form-group">
@* @Html.LabelFor(m => Model.Description, new { @class = "control-label col-sm-3" }) *@
<div class="col-sm-12">
@Html.TextAreaFor(m => m.Description, new { @class = "form-control required", @disabled = "disabled", @rows = "06" })
</div>
</div>
@* <div class="form-group">
@Html.LabelFor(m => Model.Date, new { @class = "control-label col-sm-3" })
<div class="col-sm-9">
@Html.TextBoxFor(m => m.Date, new { @class = "form-control required", @disabled = "disabled" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(m => Model.Status, new { @class = "control-label col-sm-3" })
<div class="col-sm-9">
@Html.TextBoxFor(m => m.Status, new { @class = "form-control required", @disabled = "disabled" })
</div>
</div>
*@
</div>
</div>
<div class="modal-footer">
@*<button type="submit" id="btnSave" class="btn btn-primary">Publish</button>*@
@Html.ActionLink("Publish", "Index", "Publish", new { id = Model.ID }, new { @class = "btn btn-primary" })
@*<button type="button" id="btnClear" class="btn btn-warning">Close</button>*@
@Html.ActionLink("Close", "Index", "News", null, new { @class = "btn btn-warning" })
</div>
</div>
}
<script>
$("form").removeData("validator");
$("form").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse("form");
</script>
<div id='myModal' class='modal fade in'>
<div class="modal-dialog">
<div class="modal-content">
<div id='myModalContent'></div>
</div>
</div>
</div>
if first time click on search of id 21 row, then all times on click of other id is also showing content of id 21 nd if click on edit, then also showing details of firstly click row data.
