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/
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 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.
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 an index view that I want to update automatically as the user types in a client id. I got something similiar to work (only it was updating just a label) - but this will not work.
What happens is the partial is just rendered by itself (not in place of the UpdateTargetID). So the data is rendered on a new page. Here is my code:
Controller:
public ActionResult ClientList(string queryText)
{
var clients = CR.GetClientLike(queryText);
return PartialView("ClientIndex", clients);
}
Partial View:
<table>
<thead>
<tr>
<td>Client ID</td>
<td>Phone1</td>
<td>Phone2</td>
<td>Phone3</td>
<td>Phone4</td>
</tr>
</thead>
<tbody>
<% if (Model != null)
{
foreach (Client c in Model)
{ %>
<tr>
<td><%= Html.Encode(c.ClientID)%></td>
<td><%= Html.Encode(c.WorkPhone)%></td>
<td><%= Html.Encode(c.WorkPhone1)%></td>
<td><%= Html.Encode(c.WorkPhone2)%></td>
<td><%= Html.Encode(c.WorkPhone3)%></td>
</tr>
<% }
} %>
</tbody>
Main View:
Insert code messed up, so this is just copy/pasted:
$(function() {
$("#queryText").keyup(function() {
$('#sForm').submit();
});
});
<div id="status" class="status" name="status">
<%--<% Html.RenderPartial("ClientIndex", ViewData["clients"]); %> Should this be here???? --%>
</div>
I had the same problem.
In my partial view, I had this
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
but it should have been this
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IQueryable<Client>>" %>
an easy way to test if your ajax call is working is to return a string instead of an ActionResult
public string ClientList(string queryText)<
{
return("ok, the ajax call must have worked because I see this string.");
}
Rather than posting a form on the page constantly why not do a behind the scenes jQuery.get call to get the search results for the provided text. I would think this would be faster and cleaner. When submitting the form like I think you are (judging from my reading of your code) you are causing the page to essentially refresh (and not re-write to the div).
$('#sForm').submit()
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!