Knockout: foreach not working with asp.net mvc - asp.net-mvc

I know this might be easy but somehow I'm unable to implement foreach for a knockout binding. The code is as below:
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
#section scripts
{
<script type="text/javascript">
ko.applyBindings({
people: [
{ firstName: 'Bert', lastName: 'Bertington' },
{ firstName: 'Charles', lastName: 'Charlesforth' },
{ firstName: 'Denise', lastName: 'Dentiste' }
]
});
</script>
}
<div>
<table>
<thead>
<tr><th>First name</th><th>Last name</th></tr>
</thead>
<tbody data-bind="foreach: people">
<tr>
<td data-bind="text: firstName"></td>
<td data-bind="text: lastName"></td>
</tr>
</tbody>
</table>
</div>
And the rendered HTML is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> - My ASP.NET Application</title>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Application name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
<div>
<table>
<thead>
<tr><th>First name</th><th>Last name</th></tr>
</thead>
<tbody data-bind="foreach: people">
<tr>
<td data-bind="text: firstName"></td>
<td data-bind="text: lastName"></td>
</tr>
</tbody>
</table>
</div>
<hr />
<footer>
<p>© 2014 - My ASP.NET Application</p>
</footer>
</div>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<script src="/Scripts/knockout.debug.js"></script>
<script src="/Scripts/knockout.mapping-latest.debug.js"></script>
<script src="/Scripts/knockout.js"></script>
<script src="/Scripts/knockout.mapping-latest.js"></script>
<script type="text/javascript">
ko.applyBindings({
people: [
{ firstName: 'Bert', lastName: 'Bertington' },
{ firstName: 'Charles', lastName: 'Charlesforth' },
{ firstName: 'Denise', lastName: 'Dentiste' }
]
});
</script>
</body>
</html>
The problem is that the foreach doesn't work as implemented in the code. The error I get is (debugged using Knockout context):
ExtensionError: TypeError message: "Object.getOwnPropertyNames called
on non-object" stack: (...) get stack: function () { [native code] }
set stack: function () { [native code] }
proto: Error info: "Please select a dom node with ko data."
Uncaught TypeError: undefined is not a function
I have trying this for a while now but with no success.
Thanks.


So I solved it!
The problem was that knockout 2.0 has a line of code:
var elems = jQuery['clean']([html]);
But the jQuery 1.10 that I was using deprecated the clean method.
So I upgraded my knockout to 3.0 and it worked!
Thanks to #Boaz for answering this question on stackoverflow

Related

Add form to layout

I need to add a login popup to the header of every page, so naturally I want to add it to the layout as a partial view.
The problem is, the layout doesnt have a pagemodel.
We do use a BasePageModel that every page inherits from, where I can add 2 strings for username/password. But how would the layout see those fields?

You can specify a model for the Layout page just as you would a standard content page:
#model BasePageModel
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
...
Then your properties are accessible via the Model property of the Layout page. The BasePageModel will also be passed to any partials that you add to the layout (unless you specify a different model for the partial), so you can also access the properties in those.

I need to add a login popup to the header of every page, so naturally
I want to add it to the layout as a partial view.
According to your description, I do a demo for that situation. But I don’t use a BasePageModel that every page inherits from.
The demo as below, hoping it can help you.
1.Add a Login page with page model, and post method
Login.cshtml.cs:
public class LoginModel : PageModel
{
[BindProperty]
public string Username { get; set; }
[BindProperty]
public string Password { get; set; }
public string Msg { get; set; }
public void OnGet()
{
}
public IActionResult OnPost(string Username, string Password)
{
//do your other things...
return Page();
}
}
Login.cshtml:
#page
#model Login.Pages.LoginModel
#{
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Login</title>
</head>
<body>
<h3>Login Form</h3>
#Model.Msg
<form method="post" asp-page="Login">
<table>
<tr>
<td>Username</td>
<td><input type="text" asp-for="#Model.Username" /></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" asp-for="#Model.Password" /></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="Login" /></td>
</tr>
</table>
</form>
</body>
</html>
Add the login form in the layout. Using name attribute: change input type="text" asp-for="#Model.Username" into input type="text" name="Username"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
</li>
</ul>
</div>
<div>
<fieldset>
<div class="container">
<div class="row">
<div class="col-xs-12">
<button id="btnShowModal" type="button"
class="btn btn-sm btn-default pull-left col-lg-11 button button4">
login
</button>
<div class="modal fade" tabindex="-1" id="loginModal"
data-keyboard="false" data-backdrop="static">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×
</button>
</div>
<div class="modal-body">
<form method="post" asp-page="Login">
<table border="0" cellpadding="2" cellspacing="2">
<tr>
<td>Username</td>
<td><input type="text" name="Username"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="Password"></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="Login"></td>
</tr>
</table>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>
</div>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2021 - Login - <a asp-area="" asp-page="/Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#await RenderSectionAsync("Scripts", required: false)
<script type="text/javascript">
$(document).ready(function () {
$("#btnShowModal").click(function () {
$("#loginModal").modal('show');
});
$("#btnHideModal").click(function () {
$("#loginModal").modal('hide');
});
});
</script>
</body>
</html>
Results:

(MVC) I have a search bar in my shared _Layout. It works from other Views but not in the _Layout

Basically what the title says. I have a view named books in which the search bar works perfectly and gives results. This is not happening in the _Layout shared view. I've tried several scripts and stuff but to no avail. Any advice?
This is the _Layout
<!DOCTYPE html>
#model IEnumerable<GoodReads.Models.Libro>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#Html.ActionLink("Nombre de aplicación", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Inicio", "Index", "Home")</li>
<li>#Html.ActionLink("Registrar Turno", "AltaTurno", "Turno")</li>
<li>#Html.ActionLink("Buscar Libros", "Books", "Libro")</li>
<li>
#using (Html.BeginForm(FormMethod.Get))
{
<div>
#Html.TextBox("parametro")
<input type="submit" id="btnSearch" value="Some text"/>
</div>
}
</li>
</ul>
</div>
</div>
</div>
<div id="Books">
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer></footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
This is the Books view
#model IEnumerable<GoodReads.Models.Libro>
#{
/**/
ViewBag.Title = "Books";
}
<head>
<link href="#Url.Content("~/Content/Style.css")" rel="stylesheet" type="text/css" />
</head>
<body>
#foreach (var item in Model)
{
<div style="margin-left: 350px; margin-top: 50px;">
<h1 class="title-font">
#item.Title
<small class="year-font">(#item.Year)</small>
</h1>
</div>
<div style="margin-left: 350px; margin-top: 10px;">
<p style="font-size: 22px;">by #item.Author</p>
</div>
<div style="margin-left: 350px; margin-top: 10px;">
<p style="font-size: 22px;">#item.ISBN</p>
</div>
}
</body>
The Controller for Books (The conection to the database is made through instead of doing it directly in the controller)
// GET: Libro
public ActionResult Index()
{
return View();
}
public ActionResult Books(string parametro)
{
List<Libro> listalibros = ADLibros.BuscarLibro(parametro);
return View(listalibros);
}

The problem is your form. You don't set its action. If you don't tell it it will use the default which is the controller that renders the page. So when your Books controller renders the page this works because the default controller will be the books controller. You need to specify the action of your get form explicitly. To see the problem use your browser developer tools to inspect the form for the books page and the other pages.
To fix (assuming your controller for books is called BooksController) change the form code in your _Layout page to this
#using (Html.BeginForm("books", "books", FormMethod.Get))
{
<div>
#Html.TextBox("parametro")
<input type="submit" id="btnSearch" value="Some text" />
</div>
}
We are using an overload of Html.BeginForm with 3 arguments. The first is the actionName, the second is the controllerName and the 3rd is the FormMethod.

ASP.NET MVC Bootstrap Datepicker Error

I am having some trouble implementing a datepicker for date fields on some of my views. I get an error:
JavaScript runtime error: Object doesn't support property or method 'datepicker'
This is my _Layout code and I can't seem to figure on why this error continues to pop up. Any help would be greatly appreciated.
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<script src="#Url.Content("~/Scripts/jquery-2.1.3.js")"
type="text/javascript"></script>\
<script src="#Url.Content("~/Scripts/bootstrap.js")"
type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/boostrap-datepicker.min.js")"
type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/DatePickerReady.js")"
type="text/javascript"></script>
<script>
$(function () {
$('.datepicker').datepicker({
format: 'mm-dd-yyyy'
});
});
</script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
<p class="nav navbar-text navbar-right">Hello, #User.Identity.Name!</p>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>

May be the problem is your code is adding jQuery and Bootstrap twice by calling:
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
This is a documented cause of issues with jQuery. I get a similar error in this snippet when adding jQuery twice.
<html>
<head>
<title>DatePicker Example</title>
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function () {
$("#datep").datepicker();
});
</script>
</head>
<body>
<h3>Click to select a date :</h3>
<input type="text" id="datep" />
<script src="https://code.jquery.com/jquery-1.12.4.js">
</body>
</html>
Uncaught TypeError: $(...).datepicker is not a function
Just remove extra jQuery and any other duplicated library. Also include jQuery UI as suggested by user Shyju.
<html>
<head>
<title>DatePicker Example</title>
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function () {
$("#datep").datepicker();
});
</script>
</head>
<body>
<h3>Click to select a date :</h3>
<input type="text" id="datep" />
</body>
</html>

Accordion MVC 4

I was trying to make an accordion in my page with this tutorial but nothing works. This is my view:
#model SGP.Models.Queries
#Scripts.Render("~/bundles/jqueryui")
<script type="text/javascript">
$(function () {
$("#accordion").accordion();
});
</script>
<div id="accordion">
<h3>Assiduidade</h3>
<div>
#using (Html.BeginForm())
{
<table>
<tr>
<th>
#Html.DisplayName("Nome")
</th>
...
</tr>
#foreach (var item in Model.query1)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Nome)
</td>
...
</tr>
}
</table>
}
</div>
<h3>Avaliação</h3>
<div>
#using (Html.BeginForm())
{
<table>
<tr>
<th>
#Html.DisplayName("Nome")
</th>
...
</tr>
#foreach (var item in Model.query2)
{
<tr>
...
</tr>
}
</table>
}
</div>
</div>
This is my _Layout.cshtml:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title - SGP</title>
...
#Styles.Render("~/Content/fullcalendar")
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<header>
...
</header>
<div id="body">
#RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© #DateTime.Now.Year
</div>
</div>
</footer>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryui")
#Scripts.Render("~/Content/themes/base/css", "~/Content/css")
#Scripts.Render("~/bundles/bootstrap")
#Scripts.Render("~/bundles/fullcalendar")
#RenderSection("scripts", required: false)
</body>
</html>
But when i run my application, there is no accordion. I added the jQuery-ui.css and the code in the BundleConfig like it says in the tutorial but nothing works. What am i doing wrong? Thanks

All you need is to include jquery plugin and jquery-ui.css in your view.
Another solution is to set layout in top of view.
#{
Layout="~/your_layout_path";
}
Here is an example of working solution

On Ajax call MVC.Grid Updated but css not applied :( Asp.net MVC

All things working fine 1st time data render fine but when click on any page number then with Ajax call data fetch successfully all headers and footer css remain the same but css of table rows de-attached not included please if you have any suggestion tell me.
Advance Thanks
Before ajax call this is the rendered html in browser.
<html lang="en" class=" js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths"><head>
<meta charset="utf-8">
<title>Index - Anchor Bay Insurance Managers, Inc.</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon">
<meta name="viewport" content="width=device-width">
<link href="/Content/Site.css" rel="stylesheet">
<link href="/Content/bootstrap.css" rel="stylesheet">
<link href="/Content/bootstrap-theme.css" rel="stylesheet">
<link href="/Content/TwoColumnForm.css" rel="stylesheet">
<link href="/Content/bootstrap.min.css" rel="stylesheet">
<script src="/Scripts/modernizr-2.5.3.js"></script>
<script src="/Scripts/jquery-1.9.1.js"></script>
<script src="/Scripts/Bootstrap/bootstrap.min.js"></script>
<script src="/Scripts/ladda-bootstrap/spin.min.js"></script><style type="text/css"></style>
<script src="/Scripts/ladda-bootstrap/ladda.min.js"></script>
<script src="/Scripts/URI.js"></script>
<script src="/Scripts/gridmvc.js"></script>
<script src="/Scripts/gridmvc-ext.js"></script>
<script type="text/javascript">window.EBCallBackMessageReceived_ec65_a99d_1166_10f1_472b_e904_7a5b_da73 = function (data) {window.postMessage({name: 'EBCallBackMessageReceived', msg: data, id:'ec65_a99d_1166_10f1_472b_e904_7a5b_da73'}, '*')};if (window.addEventListener) {
var callback_func = function(evt) {
if ('undefined' != typeof evt.target && "A" == evt.target.nodeName) {
var url = evt.target.href;
EBCallBackMessageReceived_ec65_a99d_1166_10f1_472b_e904_7a5b_da73(url);
}
return true;
};
var cb_add_listener_result_click = window.addEventListener('click', callback_func, true);
var cb_add_listener_result_contextmenu = window.addEventListener('contextmenu', callback_func, true);
} else if (document.attachEvent) {
var callback_func = function () {
if ('undefined' != typeof event.srcElement &&'A' == event.srcElement.tagName) {
var url = event.srcElement.href;
EBCallBackMessageReceived_ec65_a99d_1166_10f1_472b_e904_7a5b_da73(url);
}
return true;
};
var cb_add_listener_result_click = document.attachEvent('onclick', callback_func);
var cb_add_listener_result_contextmenu = document.attachEvent('oncontextmenu', callback_func);
}
</script><script type="text/javascript">window.EBCallBackMessageReceived_ccb0_9b98_55aa_c6cc_ff2e_a9db_6021_c2dd = function (data) {window.postMessage({name: 'EBCallBackMessageReceived', msg: data, id:'ccb0_9b98_55aa_c6cc_ff2e_a9db_6021_c2dd'}, '*')};if (window.addEventListener) {
var callback_func = function(evt) {
if ('undefined' != typeof evt.target && "A" == evt.target.nodeName) {
var url = evt.target.href;
EBCallBackMessageReceived_ccb0_9b98_55aa_c6cc_ff2e_a9db_6021_c2dd(url);
}
return true;
};
var cb_add_listener_result_click = window.addEventListener('click', callback_func, true);
var cb_add_listener_result_contextmenu = window.addEventListener('contextmenu', callback_func, true);
} else if (document.attachEvent) {
var callback_func = function () {
if ('undefined' != typeof event.srcElement &&'A' == event.srcElement.tagName) {
var url = event.srcElement.href;
EBCallBackMessageReceived_ccb0_9b98_55aa_c6cc_ff2e_a9db_6021_c2dd(url);
}
return true;
};
var cb_add_listener_result_click = document.attachEvent('onclick', callback_func);
var cb_add_listener_result_contextmenu = document.attachEvent('oncontextmenu', callback_func);
}
</script></head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">Restaurant Bar & Tavern Program</p>
</div>
<div class="float-right">
<section id="login">
Hello, <a class="username" href="/Agent/AgentProfile/33" title="Manage">azhar63</a>!
<form action="/Account/LogOff" id="logoutForm" method="post"><input name="__RequestVerificationToken" type="hidden" value="lZ1mXfXGZsdpR9aYMjceHEQ8KEYvb7P8zyxe9e-Yoj2cmFF761uvsOxtLEdOxm-_NG6lk9nBihRrNUBzLGMZ0w5lYTePwYNqWfEmDzCsCew1"> Log off
</form>
</section>
<nav>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
<header>
<div class="content-wrapper">
<div class="float-left">
<ul id="menu">
<li>Agency</li>
<li>Agent</li>
<li>Quote</li>
<li>Email Templates</li>
</ul>
</div>
</div>
</header>
<section class="content-wrapper main-content clear-fix">
<link href="/Content/bootstrap.min.css" rel="stylesheet">
<ul id="menu">
<li>Create Agent</li>
</ul>
<h2>Agents</h2>
<div class="boxDiv" style="width:100%">
<div style="width:100%">
<div class="grid-mvc" data-lang="en" data-gridname="metaData" data-selectable="true" data-multiplefilters="false">
<div class="grid-wrap">
<table class="table table-striped grid-table">
<thead>
<tr>
<th class="grid-header"><div class="grid-header-title">First Name</div></th><th class="grid-header"><div class="grid-header-title">Last Name</div></th><th class="grid-header"><div class="grid-header-title">UserName</div></th><th class="grid-header"><div class="grid-header-title">Agency</div></th><th class="grid-header"><div class="grid-header-title">Email</div></th><th class="grid-header" style="width:15%;"><div class="grid-header-title"><span></span></div></th> </tr>
</thead>
<tbody>
<tr class="grid-row ">
<td class="grid-cell" data-name="FirstName">Muhammad Atif</td><td class="grid-cell" data-name="LastName">Aziz</td><td class="grid-cell" data-name="AgentUserInfo.UserName">atif17</td><td class="grid-cell" data-name="AgentOfAgency.Name">Test</td><td class="grid-cell" data-name="AgentUserInfo.Email">atif.aziz#nxb.com.pk</td><td class="grid-cell" data-name=""> <div class="grid-action-links">
<i></i>
<i></i>
<span class="light1">|</span>
<a class="delete" href="/Agent/Delete/57" title="Delete"><i></i></a>
</div>
</td> </tr>
<tr class="grid-row ">
<td class="grid-cell" data-name="FirstName">Sanan</td><td class="grid-cell" data-name="LastName">Chatha</td><td class="grid-cell" data-name="AgentUserInfo.UserName">sanan63</td><td class="grid-cell" data-name="AgentOfAgency.Name">Test</td><td class="grid-cell" data-name="AgentUserInfo.Email">azhar.abim#nxvt.com</td><td class="grid-cell" data-name=""> <div class="grid-action-links">
<i></i>
<i></i>
<span class="light1">|</span>
<a class="delete" href="/Agent/Delete/56" title="Delete"><i></i></a>
</div>
</td> </tr>
</tbody>
</table>
<div class="grid-footer">
<div class="grid-footer">
<div class="grid-pager">
<ul class="pagination">
<li><span class="glyphicon glyphicon-step-backward"></span></li>
<li class="active"><a class="grid-page-link" data-page="1">1</a></li>
<li>2</li>
<li><span class="glyphicon glyphicon-step-forward"></span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
//$(document).on("change",function () {
// $(".grid-mvc").gridmvc();
// //$(".grid-mvc").gridmvc().refreshFullGrid();
// //$(".grid-mvc").refreshFullGrid();
//});
//$(document).ajaxComplete(function () {
// $(".grid-mvc").gridmvc().refreshFullGrid();
//});
</script>
</div>
<script src="/Scripts/gridmvcajax.custom.js"></script>
<script src="/Content/Scripts/Global.js"></script>
<script type="text/javascript">
$(document).ready(function () {
pageGrids.metaData.ajaxify(
{
getPagedData: "/Agent/Grid",
getData: "/Agent/Index"
});
});
$(document).ajaxComplete(function () {
$(".grid-mvc").gridmvc();
});
</script>
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p style="padding-top:10px;">© 2014 - Anchor Bay Insurance Managers, Inc.</p>
</div>
</div>
</footer>
</body>
</html>
After Ajax call this is the rendered html in browser.
<html lang="en" class=" js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths"><head>
<meta charset="utf-8">
<title>Index - Anchor Bay Insurance Managers, Inc.</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon">
<meta name="viewport" content="width=device-width">
<link href="/Content/Site.css" rel="stylesheet">
<link href="/Content/bootstrap.css" rel="stylesheet">
<link href="/Content/bootstrap-theme.css" rel="stylesheet">
<link href="/Content/TwoColumnForm.css" rel="stylesheet">
<link href="/Content/bootstrap.min.css" rel="stylesheet">
<script src="/Scripts/modernizr-2.5.3.js"></script>
<script src="/Scripts/jquery-1.9.1.js"></script>
<script src="/Scripts/Bootstrap/bootstrap.min.js"></script>
<script src="/Scripts/ladda-bootstrap/spin.min.js"></script><style type="text/css"></style>
<script src="/Scripts/ladda-bootstrap/ladda.min.js"></script>
<script src="/Scripts/URI.js"></script>
<script src="/Scripts/gridmvc.js"></script>
<script src="/Scripts/gridmvc-ext.js"></script>
<script type="text/javascript">window.EBCallBackMessageReceived_9c96_3370_b919_1fd0_f16c_76ca_4bda_54b9 = function (data) {window.postMessage({name: 'EBCallBackMessageReceived', msg: data, id:'9c96_3370_b919_1fd0_f16c_76ca_4bda_54b9'}, '*')};if (window.addEventListener) {
var callback_func = function(evt) {
if ('undefined' != typeof evt.target && "A" == evt.target.nodeName) {
var url = evt.target.href;
EBCallBackMessageReceived_9c96_3370_b919_1fd0_f16c_76ca_4bda_54b9(url);
}
return true;
};
var cb_add_listener_result_click = window.addEventListener('click', callback_func, true);
var cb_add_listener_result_contextmenu = window.addEventListener('contextmenu', callback_func, true);
} else if (document.attachEvent) {
var callback_func = function () {
if ('undefined' != typeof event.srcElement &&'A' == event.srcElement.tagName) {
var url = event.srcElement.href;
EBCallBackMessageReceived_9c96_3370_b919_1fd0_f16c_76ca_4bda_54b9(url);
}
return true;
};
var cb_add_listener_result_click = document.attachEvent('onclick', callback_func);
var cb_add_listener_result_contextmenu = document.attachEvent('oncontextmenu', callback_func);
}
</script><script type="text/javascript">window.EBCallBackMessageReceived_7e3f_667e_eaf1_f8e4_cbe5_0a2a_b8c4_6119 = function (data) {window.postMessage({name: 'EBCallBackMessageReceived', msg: data, id:'7e3f_667e_eaf1_f8e4_cbe5_0a2a_b8c4_6119'}, '*')};if (window.addEventListener) {
var callback_func = function(evt) {
if ('undefined' != typeof evt.target && "A" == evt.target.nodeName) {
var url = evt.target.href;
EBCallBackMessageReceived_7e3f_667e_eaf1_f8e4_cbe5_0a2a_b8c4_6119(url);
}
return true;
};
var cb_add_listener_result_click = window.addEventListener('click', callback_func, true);
var cb_add_listener_result_contextmenu = window.addEventListener('contextmenu', callback_func, true);
} else if (document.attachEvent) {
var callback_func = function () {
if ('undefined' != typeof event.srcElement &&'A' == event.srcElement.tagName) {
var url = event.srcElement.href;
EBCallBackMessageReceived_7e3f_667e_eaf1_f8e4_cbe5_0a2a_b8c4_6119(url);
}
return true;
};
var cb_add_listener_result_click = document.attachEvent('onclick', callback_func);
var cb_add_listener_result_contextmenu = document.attachEvent('oncontextmenu', callback_func);
}
</script></head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">Restaurant Bar & Tavern Program</p>
</div>
<div class="float-right">
<section id="login">
Hello, <a class="username" href="/Agent/AgentProfile/33" title="Manage">azhar63</a>!
<form action="/Account/LogOff" id="logoutForm" method="post"><input name="__RequestVerificationToken" type="hidden" value="wvvSbtslTZV3nqpwsX2eWoeHa91OwSxF0ne60C6QLvWeWEKVKZhhembtcbPeVLMKlVBKGA7bcK4oAnIIoK5yhG_DrAJRASQZbV_uyqeJLqQ1"> Log off
</form>
</section>
<nav>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
<header>
<div class="content-wrapper">
<div class="float-left">
<ul id="menu">
<li>Agency</li>
<li>Agent</li>
<li>Quote</li>
<li>Email Templates</li>
</ul>
</div>
</div>
</header>
<section class="content-wrapper main-content clear-fix">
<link href="/Content/bootstrap.min.css" rel="stylesheet">
<ul id="menu">
<li>Create Agent</li>
</ul>
<h2>Agents</h2>
<div class="boxDiv" style="width:100%">
<div style="width:100%">
<div class="grid-mvc" data-lang="en" data-gridname="metaData" data-selectable="true" data-multiplefilters="false">
<div class="grid-wrap">
<table class="table table-striped grid-table">
<thead>
<tr>
<th class="grid-header"><div class="grid-header-title">First Name</div></th><th class="grid-header"><div class="grid-header-title">Last Name</div></th><th class="grid-header"><div class="grid-header-title">UserName</div></th><th class="grid-header"><div class="grid-header-title">Agency</div></th><th class="grid-header"><div class="grid-header-title">Email</div></th><th class="grid-header" style="width:15%;"><div class="grid-header-title"><span></span></div></th> </tr>
</thead>
<tbody>
<div style="width:100%">
AslamNadeemaslam17Testazhar.ynn#nxvt.com <div class="grid-action-links">
<i></i>
<i></i>
<span class="light1">|</span>
<a class="delete" href="/Agent/Delete/55" title="Delete"><i></i></a>
</div>
Malik AzharAwanazhar63Testazhar.rafique#nxb.com.pk <div class="grid-action-links">
<i></i>
<i></i>
<span class="light1">|</span>
<a class="delete" href="/Agent/Delete/33" title="Delete"><i></i></a>
</div>
</div>
<script type="text/javascript">
//$(document).on("change",function () {
// $(".grid-mvc").gridmvc();
// //$(".grid-mvc").gridmvc().refreshFullGrid();
// //$(".grid-mvc").refreshFullGrid();
//});
//$(document).ajaxComplete(function () {
// $(".grid-mvc").gridmvc().refreshFullGrid();
//});
</script></tbody>
</table>
<div class="grid-footer">
<div class="grid-footer">
<div class="grid-pager">
<ul class="pagination">
<li><span class="glyphicon glyphicon-step-backward"></span></li>
<li class=""><a class="grid-page-link" data-page="1" href="">1</a></li>
<li class="active">2</li>
<li><span class="glyphicon glyphicon-step-forward"></span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
//$(document).on("change",function () {
// $(".grid-mvc").gridmvc();
// //$(".grid-mvc").gridmvc().refreshFullGrid();
// //$(".grid-mvc").refreshFullGrid();
//});
//$(document).ajaxComplete(function () {
// $(".grid-mvc").gridmvc().refreshFullGrid();
//});
</script>
</div>
<script src="/Scripts/gridmvcajax.custom.js"></script>
<script src="/Content/Scripts/Global.js"></script>
<script type="text/javascript">
$(document).ready(function () {
pageGrids.metaData.ajaxify(
{
getPagedData: "/Agent/Grid",
getData: "/Agent/Index"
});
});
$(document).ajaxComplete(function () {
$(".grid-mvc").gridmvc();
});
</script>
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p style="padding-top:10px;">© 2014 - Anchor Bay Insurance Managers, Inc.</p>
</div>
</div>
</footer>
</body>
</html>

It looks like your table tags are getting stripped out and converted to divs durring the ajax call - I had the same problem and ended up converting my table tags to divs - you can define the widths of the column divs for the header, footer, and table cells (which will now all be divs), to get everything to line up properly.

Resources