This is my view:
<table class="table">
<tr>
<td>
#Html.TextBox("SearchParameter", null, new { #style = "width:200px; height:30px" })
</td>
<td>
#using (Html.BeginForm("GetSearchParameter", "Parameter", new { sSearchParameterValue = ??? }, FormMethod.Post))
{
<input type="submit" value="GO!" />
}
</td>
</tr>
</table>
In my Controller "Parameter" I have a method "GetSearchParameter" that has one parameter which is "sSearchParameterValue". What I would like to do is pass the value of my textbox to that parameter.
I already tried two different ways:
1) I get sSearchParameterValue = null:
#using (Html.BeginForm("GetSearchParameter", "Parameter", new { sSearchParameterValue = Request.Form["SearchParameter"] }, FormMethod.Post))
2) I get A potentially dangerous Request.QueryString value was detected from the client:
#using (Html.BeginForm("GetSearchParameter", "Parameter", new { sSearchParameterValue = #Html.TextBox("SearchParameter") }, FormMethod.Post))
Can someone tell me how to do this?
Thank you,
Grega
Related
I tried to bind dynamically partial view its working but for jquery
datatable against first row what I specified below its not working.
#model IEnumerable<PurModelClass>
<table id="stock-audit-table" class="table table-striped table-bordered dt-responsive nowrap">
<thead>
<tr>
#*<th>Purchase From</th>
<th>Purchase Date</th>*#
<th>Item Name</th>
<th>Qty</th>
<th>Unit</th>
<th>Cost</th>
<th>Net Amount</th>
<th>Discount</th>
<th>Vat</th>
<th>Gross</th>
</tr>
</thead>
<tbody id="stock-audit-tbody">
#foreach (var item in Model)
{
<tr><td colspan="8">Invoice No: #item.PurInvNo Inv Date: #($"{#item.PurDate:MMM-dd-yyyy}") Vendor: #item.VendorName </td></tr>
foreach (var detail in item.PurDetails)
{
<tr>
<td>#detail.StockName</td>
<td>#detail.PurQty</td>
<td>#detail.UnitName</td>
<td>#detail.UnitPrice</td>
<td>#detail.Total</td>
<td>#detail.Discount</td>
<td>#detail.VAT</td>
<td>#detail.NetAmount</td>
</tr>
}
}
</tbody>
<tfoot>
</tfoot>
</table>
This the datatable script, is there any way to implement jquery datatable by demanding specific row with colspan properties.
<script type="text/javascript">
$(document)
.ready(function() {
$('#stock-audit-table').DataTable({
"autoWidth": false,
"order": [[0, "desc"]]
});
}
);
</script>
Try the rowGroup extension. You can use startRender and endRender to customize the summary data
$('#stock-audit-table').DataTable({
"autoWidth": false,
"order": [[0, "desc"]],
"rowGroup": {
dataSrc: 0,
startRender: function(groupName){
return $('<tr/>').append("<td colspan="8">TODO put data here</td>");
}
}
});
<tbody id="stock-audit-tbody">
#foreach (var item in Model)
{
foreach (var detail in item.PurDetails)
{
<tr>
<td>
<!-- Define a key to be referenced by the
'datasrc' property in dataTables -->
#item.GroupName
</td>
<td>#detail.StockName</td>
<td>#detail.PurQty</td>
<td>#detail.UnitName</td>
<td>#detail.UnitPrice</td>
<td>#detail.Total</td>
<td>#detail.Discount</td>
<td>#detail.VAT</td>
<td>#detail.NetAmount</td>
</tr>
}
}
</tbody>
I'm working on a website for someone and am having a small issue. I'll admit I'm a little new to MVC and EF so I've got this issue. My Index view shows my products, but it shows them in a straight up and down list, like the table I created it supposed to do.
What I'm trying to do is create a gallery, where they're side by side for say 4 in a row, then move on to the next row and so forth (God I know this is making sense). Here's my view
#model IEnumerable<AccessorizeForLess.ViewModels.DisplayProductsViewModel>
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Index</h2>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<table class="table">
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Name)<br />
<img src="#item.Image.ImagePath"/>
</td>
<td>
#Html.DisplayFor(modelItem => item.Price)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
#Html.ActionLink("Details", "Details", new { id = item.Id }) |
#Html.ActionLink("Delete", "Delete", new { id = item.Id })
</td>
</tr>
}
</table>
And of course it's doing what it's supposed to do. Can someone help me out with this?
In case anyone has anything close to this issue this is what I came up with and it works just the way I was looking for:
#model IEnumerable<AccessorizeForLess.ViewModels.DisplayProductsViewModel>
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Products</h2>
<p>
#Html.ActionLink("Create New", "Create")
</p>
#foreach (var item in Model)
{
<div style="float:left; width:25%">
#Html.DisplayFor(modelItem => item.Name)<br />
<input id="Hidden1" type="hidden" value="#item.Id" />
<div>$#Html.DisplayFor(modelItem => item.Price)</div>
<div><img src="#item.Image.ImagePath" /></div>
<div> </div>
<div>Quantity: <input type="text" id="quantity" style="width:50px;" /></div>
<div>#Html.ActionLink("Details", "Details", new { id = item.Id })</div>
</div>
}
I do, however have one question, in my controller how can I format the price as currency, I tried this:
IEnumerable<DisplayProductsViewModel> model = products.Select(p => new DisplayProductsViewModel()
{
Id = p.ProductId,
Name = p.ProductName,
Image = p.ProductImage,
Price = string.Format("{0:C}",p.ProductPrice)
}).ToList();
And get the error:
LINQ to Entities does not recognize the method 'System.String
Format(System.String, System.Object)' method, and this method cannot
be translated into a store expression
I have a Delete button inside my table and I m trying to delete the selected Row.
The problem is that I always get in the post method a null ID
<div>
<table class="table">
<thead>
<tr>
<th>Role Name</th>
<th>Action</th>
</tr>
</thead>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
#using (Html.BeginForm("Delete","Role", new { id = item.Id },FormMethod.Post))
{
<div class="form-actions no-color">
<input type="submit" value="Delete" class="btn btn-default" /> |
</div>
}
</td>
</tr>
}
</table>
In My Controller
// POST: Jobs/Delete/5
[HttpPost, ActionName("Delete")]
public ActionResult Delete(int id)
{
IdentityRole role = _context.Roles.Find(id);
_context.Roles.Remove(role);
_context.SaveChanges();
return RedirectToAction("Index");
}
Any time I click on the button the id is null
From your comments, the html generated in <form> tags is
action="/Role/Delete/b1bc13ca-a855-48b0-90e2-9e5fc081ac86"
meaning that the Id property of your model is typeof Guid. Change the POST method signature to
public ActionResult Delete(Guid id)
i have a form by dropdownlist element. i want get value of dropdownlist in controller.
i do not know how can do this. i read my username of users with dataview in controller and want to change role of them by dropdownlist options.
#using (Html.BeginForm()) {
<form name="register" action="#">
<div>
<table>
#foreach (MembershipUser user in Model)
{
var userroles = Roles.GetRolesForUser(user.UserName);
<tr>
<td>
#user.UserName
</td>
#foreach (var role in userroles)
{
<td>
#role
</td>
}
<td>
#Html.DropDownList("roleName")
#Html.ValidationMessage("roleName")
</td>
<td>
</td>
</tr>
}
</table>
<input type="submit" class="register" value="Save" />
</div>
</form>
}
and this is my controller:
public ActionResult Index()
{
ViewData["roleName"] = new SelectList(Roles.GetAllRoles(), "roleName");
return View(Membership.GetAllUsers());
}
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Index()
{
return RedirectToAction("Index", "Home");
}
Did you try:
public ActionResult Index(string roleNameSelectedValue)
{
// roleNameSelectedValue is the "Value" field of selected item in your dropdownlist
return RedirectToAction("Index", "Home");
}
Or using #Html.DropDownListFor(m => Model.roleName, ViewBag.roleName as SelectList)
In my MVC3 Web application I have a aspx main view page and a partial View Page. My table is in Partial view. I have also applied Table sorter and other table css to it. Now I want to export data from this table to excel. I tried so many ways but it didn't worked for me. Can anyone Help Me Please...
Code of my partial view is:
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<ApricaCRMEvent.Models.CRM.DatabaseEntities.CRM_Doctor_Request>>" %>
<!-- for table sorter and table Pager -->
<script src="../../__jquery.tablesorter/jquery.tablesorter.js" type="text/javascript"></script>
<script src="../../__jquery.tablesorter/jquery.tablesorter.widgets.js" type="text/javascript"></script>
<script src="../../__jquery.tablesorter/jquery.tablesorter.pager.js" type="text/javascript"></script>
<script type ="text/javascript" id="js">
$(function () {
// **********************************
// Description of ALL pager options
// **********************************
var pagerOptions = {
// target the pager markup - see the HTML block below
container: $(".pager"),
// use this url format "http:/mydatabase.com?page={page}&size={size}&{sortList:col}"
ajaxUrl: null,
// process ajax so that the data object is returned along with the total number of rows
// example: { "data" : [{ "ID": 1, "Name": "Foo", "Last": "Bar" }], "total_rows" : 100 }
ajaxProcessing: function (ajax) {
if (ajax && ajax.hasOwnProperty('data')) {
// return [ "data", "total_rows" ];
return [ajax.data, ajax.total_rows];
}
},
// output string - default is '{page}/{totalPages}'
// possible variables: {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows}
output: '{startRow} to {endRow} ({totalRows})',
// apply disabled classname to the pager arrows when the rows at either extreme is visible - default is true
updateArrows: true,
// starting page of the pager (zero based index)
page: 0,
// Number of visible rows - default is 10
size: 10,
// if true, the table will remain the same height no matter how many records are displayed. The space is made up by an empty
// table row set to a height to compensate; default is false
fixedHeight: true,
// remove rows from the table to speed up the sort of large tables.
// setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
removeRows: false,
// css class names of pager arrows
cssNext: '.next', // next page arrow
cssPrev: '.prev', // previous page arrow
cssFirst: '.first', // go to first page arrow
cssLast: '.last', // go to last page arrow
cssGoto: '.gotoPage', // select dropdown to allow choosing a page
cssPageDisplay: '.pagedisplay', // location of where the "output" is displayed
cssPageSize: '.pagesize', // page size selector - select dropdown that sets the "size" option
// class added to arrows when at the extremes (i.e. prev/first arrows are "disabled" when on the first page)
cssDisabled: 'disabled' // Note there is no period "." in front of this class name
};
// Extend the themes to change any of the default class names ** NEW **
$.extend($.tablesorter.themes.jui, {
// change default jQuery uitheme icons - find the full list of icons here: http://jqueryui.com/themeroller/ (hover over them for their name)
table: 'ui-widget ui-widget-content ui-corner-all', // table classes
header: 'ui-widget-header ui-corner-all ui-state-default', // header classes
footerRow: '',
footerCells: '',
icons: 'ui-icon', // icon class added to the <i> in the header
sortNone: 'ui-icon-carat-2-n-s',
sortAsc: 'ui-icon-carat-1-n',
sortDesc: 'ui-icon-carat-1-s',
active: 'ui-state-active', // applied when column is sorted
hover: 'ui-state-hover', // hover class
filterRow: '',
even: 'ui-widget-content', // odd row zebra striping
odd: 'ui-widget-content' // even row zebra striping
});
// call the tablesorter plugin and apply the ui theme widget
$("table").tablesorter({
theme: 'jui', // theme "jui" and "bootstrap" override the uitheme widget option in v2.7+
headerTemplate: '{content} {icon}', // needed to add icon for jui theme
// widget code now contained in the jquery.tablesorter.widgets.js file
widgets: ['uitheme', 'zebra'],
widgetOptions: {
// zebra striping class names - the uitheme widget adds the class names defined in
// $.tablesorter.themes to the zebra widget class names
zebra: ["even", "odd"]
// set the uitheme widget to use the jQuery UI theme class names
// ** this is now optional, and will be overridden if the theme name exists in $.tablesorter.themes **
// uitheme : 'jui'
}
})
// bind to pager events
// *********************
.bind('pagerChange pagerComplete pagerInitialized pageMoved', function (e, c) {
var msg = '"</span> event triggered, ' + (e.type === 'pagerChange' ? 'going to' : 'now on') +
' page <span class="typ">' + (c.page + 1) + '/' + c.totalPages + '</span>';
$('#display')
.append('<li><span class="str">"' + e.type + msg + '</li>')
.find('li:first').remove();
})
// initialize the pager plugin
// ****************************
.tablesorterPager(pagerOptions);
});
</script>
<!-- end table sorter and table Pager -->
<table class="tablesorter" id="ResultList">
<thead id="headers">
<tr>
<th>
CRMId
</th>
<th>
Territory
</th>
<th>
Doctor(MDLNo)
</th>
<th>
Requester
</th>
<th>
Suggester
</th>
<th>
Division
</th>
<th>
Estimated
</th>
<th>
Actual
</th>
<th>
Priority
</th>
<th>
Notation
</th>
<th>
Deadline
</th>
<th>
ExecutedDate
</th>
<th>
CreatedDate
</th>
<th>
CRM State
</th>
<th>
Service State
</th>
</tr>
</thead>
<tbody>
<% foreach (var item in Model) { %>
<tr>
<td>
<%: Html.ActionLink(((int)item.Id).ToString(), "DetailsCRMRequest", "CRM", new { Id = item.Id, controllerName = "FilterCRMRequest", actionName = "Index" }, null)%>
<%--<%: Html.DisplayFor(modelItem => item.Id) %>--%>
</td>
<td>
<%: Html.DisplayFor(modelItem => item.Territory_Name) %>
</td>
<td>
<%: Html.DisplayFor(modelItem => item.Request_For_Name) %> (<%: Html.DisplayFor(modelItem => item.Request_For_Id) %>)
</td>
<td>
<%: Html.DisplayFor(modelItem => item.Requester_Name) %>
</td>
<td>
<%: Html.DisplayFor(modelItem => item.Suggester_Name) %>
</td>
<td>
<%: Html.DisplayFor(modelItem => item.Division_Name) %>
</td>
<td>
<%: Html.DisplayFor(modelItem => item.Estimated_Amount) %>
</td>
<td>
<%: Html.DisplayFor(modelItem => item.Actual_Amount) %>
</td>
<td>
<%: Html.DisplayFor(modelItem => item.Compute_Priority) %>
</td>
<td>
<%: Html.DisplayFor(modelItem => item.CRM_Notation_Name) %>
</td>
<td>
<%: Html.DisplayFor(modelItem => item.Deadline) %>
</td>
<td>
<%: Html.DisplayFor(modelItem => item.Executed_Date) %>
</td>
<td>
<%: Html.DisplayFor(modelItem => item.Date_Created) %>
</td>
<td>
<%: Html.DisplayFor(modelItem => item.Compute_CRM_State) %>
</td>
<td>
<%: Html.DisplayFor(modelItem => item.Compute_Service_State) %>
</td>
</tr>
<% } %>
</tbody>
<tfoot>
<tr class="pager" align="center">
<td colspan="15">
<img src="../../Content/images/first.png" class="first" alt="First" />
<img src="../../Content/images/prev.png" class="prev" alt="Prev" />
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
<img src="../../Content/images/next.png" class="next" alt="Next" />
<img src="../../Content/images/last.png" class="last" alt="Last" />
<select class="pagesize" title="Select page size">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
</select>
<select class="gotoPage" title="Select page number"></select>
</td>
</tr>
</tfoot>
</table>
I have already tried this : this works but gives me css in Excel file and 5 td fields from all 50 records result...
function Export(e) {
window.open('data:application/vnd.ms-excel,' + $('#ResultList').html());
e.preventDefault();
}
and this : it doesn't worked totally...
function Export() {
alert("called function");
str = "";
var myTableHead = document.getElementById('headers');
var rowCount = myTableHead.rows.length;
var colCount = myTableHead.getElementsByTagName("tr")[0].getElementsByTagName("th").length;
var ExcelApp = new ActiveXObject("Excel.Application");
var ExcelSheet = new ActiveXObject("Excel.Sheet");
ExcelSheet.Application.Visible = true;
alert("before for");
for (var i = 0; i < rowCount; i++) {
for (var j = 0; j < colCount; j++) {
str = myTableHead.getElementsByTagName("tr")[i].getElementsByTagName("th")[j].innerHTML;
ExcelSheet.ActiveSheet.Cells(i + 1, j + 1).Value = str;
}
}
alert("done");
}