I am having an issue when using jeditable to edit a cell in a table.
The project is the MVC 2 web application and the table has been put on the standard about page.
How do i tell the script to call a specific method in the controller ? because it is currently just loading the entire page into the cell.
This is the javascript:
$(document).ready(function () {
$('.editable').editable('http://localhost:2196/Home/About', {
type: 'text',
cancel: 'Cancel',
event: 'dblclick',
submit: 'OK',
tooltip: 'double Click to edit...'
});
});
This is the table :
<% foreach (DataTableEditable.Models.Company item in (IEnumerable<DataTableEditable.Models.Company>)Model)
{%>
<tr id="<%= Html.Encode(item.ID) %>">
<td class="editable"><%= Html.Encode(item.Name) %> </td>
<td><%= Html.Encode(item.Address) %> </td>
<td><%= Html.Encode(item.Town) %> </td>
</tr>
<% }%>
Thanks lots
John
Thanks but I have now solved it.
I needed to add
[AcceptVerbs("POST")]
public ActionResult UpdateSettings(string id, string value)
{
return Content(value);
}
to the controller.
Related
I have 3 user controls in an aspx page in my MVC application.
i bind data from DB from one controller.
on the selection of "Filter / Status" i want to bind data (refresh) to "List" user control with out refreshing "Filter & Status" user controls.
below are my user controls in aspx page.
please help me how to refresh part of the page/user control.
i have tried by returning only "ListView" View data. but its searching for the other 2 views & throwing exception.
<td>
<%Html.RenderPartial("Filter", ViewData["FilterView"]); %>
</td>
<td valign="top" width="15%">
<%Html.RenderPartial("Status", this.ViewData["StatusView"]); %>
</td>
<td valign="top" width="85%">
<%Html.RenderPartial("List", this.ViewData["ListingView"]); %>
</td>
do sth like this
html (aspx page):
<div id="ListingView">
<%Html.RenderPartial("List", this.ViewData["ListingView"]); %>
</div>
...
<input type="button" id="refreshListingView" />
javascript to handle it:
$('#refreshListingView').click(function () {
var selectedStatusId = 'get here proper status id';
$.ajax({
url: '/YourController/GetListingView',
type: "GET",
data: { "statusId": selectedStatusId },
success: function (response) {
$('#ListingView').html(response);
}
});
});
YourController:
[HttpGet]
public ActionResult GetListingView(int statusId)
{
ViewData["ListingView"] = your data filtered by statusId or what you want;
return PartialView("List",ViewData["ListingView"]);
}
Instead of ViewData["ListingView"] I would use dedicated model, but it's just an example. It should work.
i'm having a hard time dealing with MVC Ajax helper and trying to refresh certain part of the page. In my code, I have a situation like this:
<div id="ajaxLoadedContent">
<table>
<tr>
<th>
<%: Html.Label("ProductId") %>
</th>
<th>
<%: Html.Label("ProductName") %>
</th>
<th>
</th>
</tr>
<% foreach (var product in Model.Products)
{
%>
<tr>
<td>
<%: direccion.ProductId %>
</td>
<td>
<%: direccion.ProductName %>
</td>
<td>
<% using (Ajax.BeginForm("EditProduct", "MyController",
new { ContainerDiv = "ShowEditProducts" },
new AjaxOptions() { UpdateTargetId = "ShowEditProducts", OnSuccess = "updatePlaceholder" }))
{%>
<%: Html.Hidden("ProductId", product.ProductId)%>
<input type="submit" value="Edit" />
<%} %>
</td>
</tr>
<% } %>
</table>
<script type="text/javascript">
function updatePlaceholder(context) {
var html = context.get_data();
var placeholder = context.get_updateTarget();
$(placeholder).html(html);
return false;
}
</script>
<div id="ShowEditProducts"></div>
</div>
Now, when I press the Edit button, then the 'Editor View' appears, but the problem is that when i Submit that form, then there are two options:
The data is OK, the changes are made, the form dissapears and the list is refreshed.
The data is NOT OK, the forms stays and the validation messages appear.
The problem is that the UpdateTargetId are different for each option.
Option 1 refreshes "ShowEditProducts", while Option 2 refreshes "ajaxLoadedContent". Also, ehe 'Edit View' contains JavaScript that is executed when the view is loaded using the "Edit" button but is not executed when the form contains errors and is re-rendered.
The code of the EditView looks like this:
<% using (Ajax.BeginForm("SubmitEdit", new AjaxOptions() { UpdateTargetId = Model.ContainerDiv}))
{%>
<script type="text/javascript">
// My JavaScript
</script>
<table>
<tr>
<td>
<%: Html.Label("Id")%></br>
<%: Html.TextBoxFor(x => x.Product.ProductId)%></br>
</td>
<td>
<%: Html.Label("Name")%></br>
<%: Html.TextBoxFor(x => x.Product.ProductName)%><
</td>
</tr>
</table>
<input type="submit" value="Save" />
<%: Ajax.ActionLink("Cancel", "EmptyView","Shared", new AjaxOptions() { UpdateTargetId = Model.ContainerDiv})%>
<% } %>
So, now my two big problems are:
1. The JavaScript of the 'Edit View' don't get executed when the the view is re-renderd.
2. How can i update one target is there are errors and another one when there are not.
Thanks
The object being replaced is being set on this line:
var placeholder = context.get_updateTarget();
So instead, you should add a condition here. Eg, instead of returning HTML directly, if you return an object that looks like this:
public class Result
{
public bool Success { get; set; }
public string Html { get; set; }
}
Then you could do something like this:
var result = response.get_response().get_object();
if (result.Success)
$("#ShowEditProducts").html(html);
else
$("#ajaxLoadedContent").html(html);
Alternatively, instead of returning a Success boolean, you could have a property for the ID of the control to replace. This would be more reusable, and might make sense if you want the decision of which control to replace to be done server-side.
I have simplified my work for this question but the same problem remains. I am using the Textbox HTML helper to display empty textboxes as I loop through the items in this model.
<% foreach (var item in Model) { %>
<tr>
<td><%: item.ID %></td>
<td><%: Html.TextBox("usernames", null, new { #class = "datepicker" }) %></td>
<td><%: item.Password %></td>
<td> <%: item.Race %></td>
</tr>
<% } %>
Because I have several rows this produces several fields all with the class "datepicker". I am applying the following JQuery for the datepicker:
$(document).ready(function () {
$('input').filter('.datepicker').datepicker({
dateFormat: "dd/mm/yy",
onSelect: function (value, date) {
alert(this.value);
}
});
});
When the page renders, every textbox creates a calendar as expected but it always puts the date into the textbox on line one. I need the date to go into the textbox the calendar appeared next to. The html for the code above looks fine:
<tr>
<td>6</td>
<td><input class="datepicker" id="usernames" name="usernames" type="text" value="" /></td>
<td>dinosaur</td>
<td> 1</td>
</tr>
Interstingly, if I simply create 4 of class "datepicker" everything is fine. Its the way the html helpers create the for you.
Please Help!
The answer is to give the textboxes being generated unique id's like below otherwise it will not work.
<% foreach (var item in Model) { %>
<tr>
<td><%: item.ID %></td>
<td><%: Html.TextBox("usernames", null, new { ID=item.ID #class = "datepicker" }) %></td>
<td><%: item.Password %></td>
<td> <%: item.Race %></td>
</tr>
<% } %>
I have an MVC view with a Ajax.ActionLink.
this.Ajax.ActionLink( "Create Offender", "Create", "ReportOffender",
null, new AjaxOptions()
{
HttpMethod = "GET", UpdateTargetId = "dialog",
OnBegin = "function() { $('#dialog').dialog('open'); }"
},
new Dictionary<string, object>() { { "class", "optionlink" } } )
This calls an action called "Create" which returns a partial view that is then placed inside of a div/dialog. The contents of this partial view is a table, some rows/columns and textboxes each of which have a CSS class assigned to them.
The problem is when the dialog is shown, with the partial view rendered inside, the CSS classes are ignored and not rendered.
Any ideas as to why this is happening?
Thanks
Michael
P.S This is the partial view that is returned from the Create GET action (see the Ajax.ActionLink above)...
<% using( this.Ajax.BeginForm( "Create", "ReportOffender", null, new AjaxOptions() { HttpMethod = "POST", UpdateTargetId = "dialog" } ) ) { %>
<% this.Html.RenderPartial( "~/Views/IncidentReporting/Report/Offender/DataEntryUserControl.ascx", this.Model ); %>
<% } %>
Once the user completes the form, snippet below, the Create POST method is called and the response is placed into the same dialog. This response will either be a "you've got errors" or a "saved successful" message. I use another RenderParital here because I also have a similar Edit version that uses the same form.
Below is a snippet of the HTML inside of the DataEntryUserControl.ascx and represents the form the user has to complete...
<table class="entity-form">
<tr>
<td class="entity-form-validation-summary" colspan="2">
<%= this.Html.ValidationSummary() %>
</td>
</tr>
<!-- FIRST NAME -->
<tr>
<td class="entity-form-caption"><label for="Entity.FirstName">First Name</label></td>
<td>
<%= this.Html.TextBox( "Entity.FirstName", this.Model.Entity.FirstName, 50, 50, this.Page.User.IsInRoles( SecurityGroups.Translators ), null ) %>
<%= this.Html.ValidationMessage( "Entity.FirstName" ) %>
</td>
</tr>
<!-- LAST NAME -->
<tr>
<td class="entity-form-caption"><label for="Entity.LastName">Last Name</label></td>
<td>
<%= this.Html.TextBox( "Entity.LastName", this.Model.Entity.LastName, 50, 50, this.Page.User.IsInRoles( SecurityGroups.Translators ), null )%>
<%= this.Html.ValidationMessage( "Entity.LastName" )%>
</td>
</tr>
As you can see there is nothing special. The TextBox methods with the extra parameters are extension methods I created to add MaxLength, Size, etc, to the textbox controls. It is here were I'm having the problems with the CSS. I use the same CSS classes, and form structure, elsewhere in "normal" views and they rendered correctly.
verify your html output/ or look table with web developer or firebug/
may be it hasnt class in first place/
if situation isnt like that;
put stylesheet link into your ascx/
I guess this is a noob question, but here it comes:
I have a list of products:
<% foreach (var item in Model) { %>
<tr>
<td>
<%= Html.Encode(item.code) %>
</td>
<td>
<%= Html.Encode(String.Format("{0:g}", item.date)) %>
</td>
<td>
<%= Html.Encode(item.category) %>
</td>
<td>
<%= Html.Encode(item.description) %>
</td>
<td>
<%= Html.Encode(String.Format("{0:F}", item.price)) %>
</td>
......
}
And a partial view after all of these (in the same page):
<div id="productForEdit">
<fieldset>
<legend>Your Selected Product</legend>
<% Html.RenderPartial("~/Views/Products/Edit", productObject); %>
</fieldset>
</div>
How do I use Ajax.ActionLink, so that when I will click the description of a product, the product will be plugged in the Partial View from the bottom of the page?
I tried some combination with UpdateTargetId="productForEdit", but I had no success.
The purpose is to have a quick edit tool in the page.
I think this should work:
<td>
<%= Ajax.ActionLink(Html.Encode(item.description), /* link text */
"GetProduct", /* action name */
"Product", /* controller name */
new { productCode = Model.code }, /* route values */
new AjaxOptions() { InsertionMode = InsertionMode.Replace,
UpdateTargetId = "productForEdit" }) %>
</td>
This does expect a ProductController with an action named GetProduct, which takes a parameter productCode. Have this action return the view "Products/Edit".
You could also pass the whole product as a parameter to the action method, but that changes nothing to the basic idea. Good luck!