Please suggest me regarding one issue. I am using MVC3 Razor webgrid I need 2 input submit/button [Edit/Delete] in each row. Should be button not link. Code is something like this.
#grid.GetHtml(columns:
grid.Columns(
grid.Column("ID", "id"),
grid.Column("Value", "Value"),
grid.Column(format: #<input type="button" value="Edit"/>),
grid.Column(format: #<input type="button" value="Delete"/>))
)
I have to do on server no javascript function.
Thanks a lot
You can use ACTION LINK here,
#grid.GetHtml(columns:
grid.Columns(
grid.Column("ID", "id"),
grid.Column("Value", "Value"),
grid.Column(format: #Html.ActionLink("Edit", "EditAction", new { id = item.id}),
grid.Column(format: #Html.ActionLink("Delete", "DeleteAction", new { id = item.id})
)
you can then define a nice css for it to make it look like a button,
refer
http://www.dofactory.com/topic/1015/html-actionlink-and-class-attribute.aspx
After trying options I accomplish this using a hidden field. On click button populate hidden field with javascript and submit form using javascript.
grid.Column(format: #<form method="get"action="/Controller/Action/#item.id">
<input id="Submit" type="submit" value="Edit" />
</form>)
Related
How do i data-bind the MVVM value to my dropdownlist? The input element below works well
<input class="k-textbox" placeholder="hotel business registration" required data-bind="value: dataItem.HotelStatusId"/>
I doesn't when i try to use KendoUI dropdownlist instead
#Html.Kendo().DropDownList().BindTo(new SelectList(ViewBag.HotelStatuses, "Id", "Name")).Value("#=dataItem.HotelStatusId#").Name("ddl-hotel-status");
this does not work either
#Html.Kendo().DropDownList().BindTo(new SelectList(ViewBag.HotelStatuses, "Id", "Name")).Value("dataItem.HotelStatusId").Name("ddl-hotel-status");
Found the solution, here's the working code.
#Html.Kendo().DropDownList().BindTo(new SelectList(ViewBag.HotelStatuses, "Id", "Name")).Name("ddl-hotel-status").HtmlAttributes(new Dictionary<string, object>{{"data-bind", "value: dataItem.HotelStatusId"}})
Is this possible to use Ajax.Beginform with update target inside of ajax form. like this:
using(Ajax.BeginForm("EditPhone", new { id = item.Id.Value }, new AjaxOptions {
UpdateTargetId = "TRTarget"})) {
<tr class="gradeA odd" id="TRTarget">
<input type"submit" value="submit" />
</tr>
}
Update
OK if it's possible so what is wrong with this?
This is my partial view that another partial view rendered inside it:
using(Ajax.BeginForm("EditPhone", new { id = item.Id.Value }, new AjaxOptions {
UpdateTargetId = "TRTarget"})) {
<tr class="gradeA odd" id="TRTarget">
#{Html.RenderPartial("_PhoneRow", item);}
</tr>
}
and _PhoneRow:
#model MyModel
<td>#Html.DisplayFor(model=>model.Number)</td>
<td>#Html.DisplayFor(modelItem => Model.PhoneKind)</td>
<td><input type="submit" value="Edit" class="button" /></td>
And EditPhone Action:
public ActionResult EditPhone(long Id){
//Get model
return PartialView("_EditPhoneRow", model);
}
And _EditPhoneRow:
<td>#Html.EditorFor(model => model.MainModel.Number)</td>
<td>#Html.EditorFor(model => model.MainModel.PhoneKind)</td>
<td><input type="submit" value="Save" class="button" /></td>
Actually each of my rows have an Ajax form so when click on edit I want to replace the row with another as you see, but when I add the Edit, all of my page destroyed and just _EditPhoneRow shown like I select all page for updateTrget where is the problem? and what is your suggestion to change all the specific row like this?
According to the HTML specification forms cannot be nested. This produces invalid HTML and depending on the user agent either the outer or the inner <form> simply won't work. That's a limitation of the HTML specification, don't be confused with ASP.NET MVC, it has nothing to do with it. One possibility is to replace your Ajax.BeginForm with an Ajax.ActionLink:
<tr class="gradeA odd" id="TRTarget">
#Ajax.ActionLink(
"Submit",
"EditPhone",
new { id = item.Id.Value },
new AjaxOptions { UpdateTargetId = "TRTarget" }
)
</tr>
UPDATE:
After you have updated your question and explained the symptoms I think you might have forgotten to reference the jquery.unobtrusive-ajax.min.js script to your page:
<script type="text/javascript" src="#Url.Content("~/scripts/jquery.unobtrusive-ajax.min.js")"></script>
If you don't include this script the Ajax.* helpers such as Ajax.BeginForm and Ajax.ActionLink will be simple HTML forms and anchors. No AJAX at all. It is this script that reads the HTML5 data-* attributes emitted by those helpers and unobtrusively AJAXifies them.
I am using WebGrid helper to make grid sortable in my MVC application.
#{
var grid = new WebGrid(Model, canSort:true );
#grid.GetHtml( columns:grid.Columns(
grid.Column( "Username", "Full Name", canSort:true ),
grid.Column("Profile","Profile", canSort:false)
));
}
Sortable column will override(display blue link) default style of header how can I maintain that?
In last column I have image action which will open popup using javascript dialog
<img title="View Detail" style="cursor: pointer" onclick="openPopup('#item.EncryUserId')"
src="#Url.Content("~/Content/Images/view-fullscreen.png")" />
How can I add this additional column using WebGrid?
Thanks.
Finally I got answer as per below
grid.Column(header: "Details",
format: #<text><img src="#Url.Content("~/Content/Images/view-fullscreen.png")"
style="cursor: pointer" onclick="openPopup('#item.EncryUserId')"
alt="View Detail" title="View Detail"/></text>)
and inside header there is anchor tag so i have added headerStyle: "tdheader"
and add new style .tdheader a{ color: white};
grid.Column(format:
#<img title="View Detail" style="cursor: pointer" onclick="openPopup('#item.EncryUserId')" src="#Url.Content("~/Content/Images/view-fullscreen.png")" />
)
autocomplete text box for getting city autocomplete textbox.
My code look like this,
<input id="location" type="text" name="q"
data-autocomplete="#Url.Action("locationSearch", "Home",
new { text = "location" })"/>
Now i want to convert this to razor syntex. I tried this but not working.
#Html.TextBoxFor(model => model.Location,
new { data-autocomplete = Url.Action("locationSearch", "Home")})
How can i solve this??
data-autocomplete is an HTML attribute. First of all you can't use dashes when specifying attributes in MVC, therefore you need to replace your data-autocomplete with data_autocomplete. MVC is "smart enough" and final result will read data-autocomplete.
To add an HTML attribute to your text input you need to use the following HTML helper:
#Html.TextBoxFor(model => model.Location, new { data_autocomplete = Url.Action("locationSearch", "Home") })
Please work on your acceptance rate.
u can just use this
in your view
<select id="location" name="location"></select>
<input type="submit" value="Send">
that is actually dropdownlist, not textbox, they edit the layout via css
You should use undescore symbol in HtmlAttributes argument:
#Html.TextBoxFor(model => model.Location, new { data_autocomplete = Url.Action("locationSearch", "Home")})
Is it possible to create grid in asp.net MVc3.0. The gridview that is used in asp.net similar to that if yes then please let me know how to create a simple grid in asp.net mvc3.0 I m using sql server Database to fetch data, that has to be filled in grid.
Thanks.
There are different possibilities:
Server side grids:
The built-in WebGrid helper
MvcContrib Grid
Telerik Grid
Client-Side grids:
jqGrid
YUI DataTable
and many others...
You can use WebGrid in MVC3. This is new in MVC3.
Use this code in your View.
#model IList<YourViewModel>
#{
ViewBag.Title = "Amend Absence";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#{
var grid = new WebGrid(source: Model, rowsPerPage: 200,
canPage: false, canSort: true, defaultSort: "Absentee");
}
<p>
<h2>Absentee List</h2>
<div id="grid">
#grid.GetHtml(
tableStyle: "grid",
headerStyle: "head",
alternatingRowStyle: "alt",
columns: grid.Columns(
grid.Column(format: (item) => Html.ActionLink("Edit", "Edit",
new { id = item.Id })),
grid.Column("Absentee", "Absentee",canSort:true),
grid.Column("AbsStart", "AbsStartDate")
))
</div>
</p>
See the excellent Get the Most Out of WebGrid in ASP.NET MVC
You need to create it using TABLE / TR / TD tags.
Here is few links which may help you
mvc gridview with code
http://www.schnieds.com/2010/01/gridview-in-aspnet-mvc.html