I have a simple ASP.NET MVC3 index page which holds more than 11k items. I have buttons for operation links as an extra. The code is like follows:
<table class="list">
<tr>
<th></th>
<th>
Name
</th>
<th>
Code
</th>
<th>
Explanation
</th>
</tr>
#foreach (var item in Model) {
<tr>
<td>
<a href="#Url.Action("Edit", new { id = item.ID })" class="noUL">
<img class="opr" src="#Url.Content("~/Content/Images/edit.png")" alt="Edit" title="Edit" />
</a>
<a href="#Url.Action("Details", new { id = item.ID })" class="noUL">
<img class="opr" src="#Url.Content("~/Content/Images/info.png")" alt="Details" title="Details"/>
</a>
<a href="#Url.Action("Delete", new { id = item.ID })" class="noUL">
<img class="opr" src="#Url.Content("~/Content/Images/delete.png")" alt="Delete" title="Delete"/>
</a>
</td>
<td width="600px">
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.Code)
</td>
<td>
#Html.DisplayFor(modelItem => item.Explanation)
</td>
</tr>
}
There's no problem opening it with any other browsers inluding Chrome and Firefox, but in IE8 first it tries running, then locks permanently. I don't expect a good performance from IE, but how can I make it work? Small tips for just saving the day are greatly appreciated. I tried to give static width to a varying sized column, for example.
UPDATE: I deleted the image links' column and it worked; even faster with tables, rather than div-ul-li setup I tried before.
I recommend you if you have bulk data, override the paging on the table. Send your data to table part by part with JSON. In every next or prev buttons clicking send new list to table.
Related
I have a partial view that is loading a data table. When I debug, I'm able to step into the partial view and watch the data table get built. Everything seems to work fine except nothing happens when the Data Table completes. It's as if I'm missing the last step to actually get the HTML to render my results.
I saw a post stating to use $('#datatable').DataTable(); in a function, but that did not seem to work. Also another post suggesting to use $('#partialViewDataTable').DataTable().ajax.reload(); in a function, but I couldn't get that to work either. How can I display the Data Table values in a Partial View correctly?
UPDATE:
I was able to get it to work using the .load() JQuery method. More .load() method information can be found here. I also had conflicting JQuery libraries which was the majority of my problem. I added .load() function which calls my GetAssociateResults method in my TOSAdjustmentcontroller. I have updated my original question to reflect the solution that worked for me.
View
<div class="card-content">
<div class="card-body">
<div id="dvAssociateResults">
#{Html.RenderPartial("AssociateResultsPartialView", Model);}
</div>
</div>
</div>
$("#pcmId").on("change", function () {
$("#dvAssociateResults").load('#(Url.Action("GetAssociateResults", "TOSAdjustment", null, Request.Url.Scheme))?pcmSelected=' + encodeURIComponent($('#pcmId').val()));
})
Partial View
<table class="table table-striped table-bordered dom-jQuery-events compact" id="table_id">
<thead class="navbar-dark navbar-dark bg-blue-grey white">
<tr>
<th>
Associate
</th>
<th>
SSO
</th>
<th>
PCM
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.get_employees_under_mgr_result)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.AgentName)
</td>
<td>
#Html.DisplayFor(modelItem => item.AgentSSOn)
</td>
<td>
#Html.DisplayFor(modelItem => item.MgrName)
</td>
</tr>
}
</tbody>
<tfoot>
<tr>
<th>
Associate
</th>
<th>
SSO
</th>
<th>
PCM
</th>
</tr>
</tfoot>
</table>
i am working on a project where a clerk like professional will make/edit classes time table for educational institute.
so in a day-period cell there are many drop-downs for selecting teacher, classroom/lab, batch of students, subject etc.
and this whole combination of values can be repeated many places in the grid.
so i want to post a single value combining all these 4-5 values through POST data in FORM for that cell location.
what approach should i use?
EDIT:
Oh! Yes, i am actually using PHP and angularjs and this is sample code in html
<table border="1" width="90%" height="90%" style="margin:10px">
<thead>
<tr>
<td>
Day
</td>
<td ng-repeat="hour in chours">
{{hour.name}}
<br>
{{hour.stime}}--{{hour.etime}}
<br>
<input type="checkbox" ng-model="hour.noclass" /> No class {{hour.noclass}}
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="day in weekdays">
<td>
{{day.name}}
</td>
<td ng-repeat="hour in day.hours">
<div ng-show="hour.noclass=='false'" name="cell[{{day.name}}][{{hour.name}}][]">
<select name="cars">
<option ng-model="dd" ng-repeat="sub in subjects">{{sub.name}}</option>
</select>
{{dd}}
</div>
</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
and this is in js file
var App = angular.module('tteditApp',[]);
App.controller('editCtrl', function($scope){
$scope.chours=[
{'name':'1','stime':'800','etime':'855','noclass':'true'},
{'name':'2','stime':'855','etime':'950','noclass':'true'},
{'name':'3','stime':'800','etime':'855','noclass':'false'},
{'name':'4','stime':'800','etime':'855','noclass':'false'},
{'name':'5','stime':'800','etime':'855','noclass':'false'},
{'name':'6','stime':'800','etime':'855','noclass':'false'},
{'name':'7','stime':'800','etime':'855','noclass':'false'},
{'name':'8','stime':'800','etime':'855','noclass':'false'},
{'name':'9','stime':'800','etime':'855','noclass':'false'},
{'name':'10','stime':'800','etime':'855','noclass':'false'}];
$scope.subjects=[{'name':'CLOUD'},{'name':'CC'},{'name':'ISS'},{'name':'DCT'},{'name':'DMW'},{'name':'VLSI'},{'name':'SEMINAR'},{'name':'PROJECT'},{'name':'WEB DEV'}];
$scope.weekdays=[{'name':'Monday','hours':$scope.chours},{'name':'Tuesday','hours':$scope.chours},
{'name':'Wednesday','hours':$scope.chours},{'name':'Thursday','hours':$scope.chours},{'name':'Friday','hours':$scope.chours}
,{'name':'Saturday','hours':$scope.chours}];
});
So my structure looks like this at some point. I need to select text ShapeCSR having "select" link using xpath. Both these text present in the same line.
<td>
<img class="imHeader" alt="" src="include/img/context/level_dash.gif"></img><img class="imHeader" alt="" src="include/img/context/icon_telco_level.gif"></img>
ShapeCSR
</td>
<td>
…
</td>
<td>
<a id="lnk_LEVEL_2010" href="jfn?isLevel=true&level=L4%3A2010&mfunc=614&cfunc=615&oid=L4%3A2072&ctx=L&jfnRC=5">
Select
</a>
</td>
Your question is not quite specific enough but I'm assuming you have a <table> of <tr> where you want to select the <td> containing "ShapeCSR" when the <tr> contains a <td> with the text "Select" in it.
Try this:
WebElement yourLink = webDriver.findElement(By.xpath("//tr[td/a[contains(text(),'Select')]]/td[contains(text(),'ShapeCSR')]"));
In my page I am Having 5 TextBoxes and 1 DropDownlist box
Name (It should allow only alphabets)
UserName (It should allow both alphabets and numeric)
EmailID (Email format)
PhoneNo (Only Integers
Gender
Password (Combination of alphates and numeric)
The above things should validate in while typing itself and If the format is correct tick image should display.....
If we press tab without entering data error message should display below the TextBox
Please kindly help me...
I am fresher and new to mvc3..
Below is the code i have created. Now I need to validate.... please tell me how to do it
<table>
<tr>
<td> #Html.Label("FirstdName")</td>
<td> #Html.TextBox("FirstName")</td>
<td> #Html.ValidationMessageFor(x => x.FirstName)</td>
</tr>
<tr>
<td> #Html.Label("Username")</td>
<td> #Html.TextBox("Username")</td>
<td> #Html.ValidationMessageFor(x => x.Username)</td>
</tr>
<tr>
<td> #Html.Label("Password")</td>
<td> #Html.TextBox("Password")</td>
<td> #Html.ValidationMessageFor(x => x.Password)</td>
</tr>
<tr>
<td> #Html.Label("ConfirmPassword")</td>
<td> #Html.TextBox("ConfirmPassword")</td>
<td> #Html.ValidationMessageFor(x => x.ConfirmPassword)</td>
</tr>
<tr>
<td> #Html.Label("Phone")</td>
<td> #Html.TextBox("Phone")</td>
<td> #Html.ValidationMessageFor(x => x.Phone)</td>
</tr>
<tr>
<td> #Html.Label("Gender")</td>
<td> #Html.DropDownListFor(Per => Per.Gender, new[]{
new SelectListItem(){Text="Male",Value="Male"},
new SelectListItem(){Text="Female",Value="Female"},
}, "--Select--")</td>
<td> #Html.ValidationMessageFor(x => x.Gender)</td>
</tr>
<tr>
<td> #Html.Label("Email")</td>
<td> #Html.TextBox("Email")</td>
<td> #Html.ValidationMessageFor(x => x.Email)</td>
</tr>
</table>
<input type="submit" value="Ok" />
</form>
Validation in MVC 3 is based on Annotations or Attributes which the model we are binding with the view . Check this out and u will know.
As you put the Validation Attributes , they are handled on the client side with the help of unobstrusive javascript. And it handles the way it should be handled automatically. Adding custom logic could be done with the help of jquery (like showing tick marks and messages alternately).
Raj , in here you wont get ready code snippets made for you when you havent tried yet.
So this is a General piece of advice . Come up with the issues you are facing and you will get the help from the awesome fraternity of yours. And off track Welcome to Tech world dude !
i have a table that is "supposed" to be binded with the result of a json:
<table>
<thead>
<tr>
<th>
Id
</th>
<th>
Number
</th>
<th>
Name
</th>
<th>
Password
</th>
<th>
Role
</th>
</tr>
</thead>
<tbody data-bind="foreach: Employees">
<tr>
<td>
<span data-bind="text: EmployeeId"></span>
</td>
<td>
<span data-bind="text: EmployeeNumber"></span>
</td>
<td>
<span data-bind="text: EmployeeName"></span>
</td>
<td>
<span data-bind="text: EmployeePassword"></span>
</td>
<td>
<span data-bind="text: EmployeeRole"></span>
</td>
</tr>
</tbody>
my knockout script for that is this:
<script type="text/javascript">
$(document).ready(function () {
var viewModel = {};
var data = $.getJSON("Employees.json", function (data) {
viewModel.model = ko.mapping.fromJSON(data);
ko.applyBindings(viewModel);
}
);
});
</script>
i am trying to bind the table with the json result but it is not working, where could be the problem... here is my json in controller:
public ActionResult GetEmployees()
{
var r = db.Employees;
var s = new
{
Employees = r.Select(x => new { empId = x.Id, empName = x.Name, empNumber = x.Number, empPassword = x.Password, empRole = x.Role }).ToList()
.Select(x => new
{
EmployeeId = x.empId,
EmployeeName = x.empName,
EmployeeNumber = x.empNumber,
EmployeePassword = x.empPassword,
EmployeeRole = x.empRole
}).ToArray(),
};
return Json(s, JsonRequestBehavior.AllowGet);
}
UPDATE: here is my sample returned json data:
{"Employees":[{"EmployeeId":1,"EmployeeName":X","EmployeeNumber":"1","EmployeePassword":"x","EmployeeRole":"User"},{"EmployeeId":10,"EmployeeName":"S","EmployeeNumber":"21","EmployeePassword":"s","EmployeeRole":"Admin"}]}
Assuming everything server side is fine, your model is being bound to a .model property but so your foreach should be
<tbody data-bind="foreach: model.Employees">
That's all I can see right now, will need to see more code to help further.
You may want to use firebug or chrome dev tools and confirm what javascript errors you are receiving if any, also check the response to make sure your action method is returning data.
EDIT
OK here is a jsfiddle of your code. A few things, probably typos but just in case. Missing tag in your markup and there is a un-terminated comment in your json before the first EmployeeName.
http://jsfiddle.net/madcapnmckay/3rRUQ/1/
You do need to the model.Employees as stated above. Because you are returning json from mvc it will have the correct headers so jquery will convert it to a javascript object automatically so no need for the fromJSON, instead try fromJS.
Hope this helps.
<script id="tmpl_ScreenNavigation" type="text/html">
<tr class="erow">
{{if ScreenParentNevigationId}}
<td width="250px"><table cellpadding="5" class="Permission" sceenid="${ScreenNevigationId}" border="0" RoleDetailId="0"><tr><td><label><input type="checkbox" id="view${ScreenNevigationId}" class="View" /> View</label></td><td><label><input type="checkbox" id="AddModify${ScreenNevigationId}" class="Save"/> Add/Modify</label></td><td><label><input type="checkbox" id="Delete${ScreenNevigationId}" class="Delete" /> Delete</label></td></tr></table></td>
{{/if}}
{{if !ScreenParentNevigationId}}
<td {{if !ScreenParentNevigationId}} style="background-color: #F9BDC8;"{{/if}} width="250px"><table cellpadding="5" class="Permission" sceenid="${ScreenNevigationId}" border="0" RoleDetailId="0"><tr><td {{if !ScreenParentNevigationId}} style="background-color: #F9BDC8;"{{/if}}><label><input type="checkbox" id="view${ScreenNevigationId}" class="View" /> View</label></td></tr></table></td>
{{/if}}
<td {{if !ScreenParentNevigationId}} style="background-color: #F9BDC8;"{{/if}}>${ScreenName}</td>
<td {{if !ScreenParentNevigationId}} style="background-color: #F9BDC8;"{{/if}}>${ScreenDescription}</td>
</tr>
</script>
$("#tmpl_ScreenNavigation").tmpl(resultJson).appendTo("#tblRoles");
Change the location of your JavaScript tag to the top of the html file just above the table. The data might not be populating correctly because of that.