I have an MVC3 project in which I create a dynamic jQuery DataTable. I added a custom attribute to my table called "GetDataFunc" which contains the action name on the controller side.
I want to use this attribute's value when defining the DataTable, but the #Url.Action won't accept a parameter (as oppose to a string) in the first parametes.
My code:
var table = document.getElementById('UsersTbl');
if (table.hasAttribute("GetDataFunc")) {
var func = table.GetDataFunc;
var oTable = $('#MyTbl').dataTable({
"bServerSide": true,
"sAjaxSource": '#Url.Action(func, "MyPages")',
"bProcessing": true,
"aoColumns": cols,
"oLanguage": { "sSearch": "Search all columns:" },
"fnDrawCallback": function (oSettings) {
totalRecords = oSettings.fnRecordsDisplay();
}
});
}
When I try to run my program I get:
The name 'func' does not exist in the current context
How can I dynamically define which function to call on the controller side?
Thanks
You are trying to mix JavaScript and C#. Don't.
Instead of '#Url.Action(func, "MyPages")' only use javascript to determine the url you need to go. At the end of the day #Url.Action generates you a string with url for the controller/action.
Related
I populated a SelectList Programmatically using the SelectList Constructor (IEnumerable, String, String)
IEnumerable<Permission> ie_SelLstContentAvailPerms;
tmpLstPermissions = FilterAssignablePermissionsByRoleMgblty(p_iRoleId,vmRolePermAdmin.lstPermissionsSource);
//test Forcing Results in to IEnumerable format for Select list Constructor
ie_SelLstContentAvailPerms = tmpLstPermissions.ToList();
vmRolePermAdmin.selLstPermissionsSource = new SelectList(ie_SelLstContentAvailPerms, "PermissionId", "Name");
And I use the DropDownList structure :
#Html.DropDownList("ddlAssignedRolePermissions", (Model.selLstCurrentRolePermissions), null, new { #id = "ddlAssignedRolePermissions", #size = "5", #onchange = "ddlAssignedRolePermissionsEvent(this)" })
My previous use of this structure has an ajax call who's success method is returning the updated model ----but its main body(Postify to AssignPermission(iUserID))is doing the work to the viewmodel based upon the item selected in the drop down list
$.ajax({
url: "~/../../User/AssignPermission",
type: "POST",
data: $.postify({ "p_permId": optionSelectedPerm.value, "p_UserId": iUserId }),
cache: false,
success: function () {
ReloadUserPermissions();
},
error: function () {
// alert("FAIL"); //TODO ?
}
});
I was attempting to replicate this structure for a new page , but instead of using the success results method of the Ajax call I've been trying to return the updated model in the main ajax work.. if the above example were structured this way there would be no success function and the controller ActionResult method would return the updated model. This isnt working . I see the data (updated) in the view while debugging but it does not up date the view ...
Do I have to use the success function of the Ajax call in order to update the view?
<script type="text/javascript">
$(document).ready(function () {
var optionSelectedPerm;
var mvcTmpData_iCurrentRoleID;
});
function SelectedRole(p_lstRole) {
debugger;
mvcTmpData_iCurrentRoleID = $("#ddlSelectedRole").val();
$.ajax({
url: "~/../../AdminRoles/AdminRolePermissions",
type: "POST",
data: $.postify({ "p_nullRoleId": mvcTmpData_iCurrentRoleID }),
cache: false,
success: function () {
AjaxReloadRolePermissions();
},
error: function () {
},
});
function AjaxReloadRolePermissions() {
//alert("Current RoleID: " + mvcTmpData_iCurrentRoleID);
var url = '#Url.Action("ReloadRolePermissions", "AdminRoles", new { p_RoleId = "zReplaceRoleId" })';
window.location.href = url.replace('zReplaceRoleId', mvcTmpData_iCurrentRoleID);
}
}
</script>
Please note that in order to accomplish the first working scenario the controller method as cited in the Ajax call "AssignPermission" is an ActionResult of Type EmptyResult and marked [HttpPost] so basically it can do work and not worry about a real return. BUT !! the Success function of this same Ajax call allows me to update the view with the newly adjusted ViewModel....
My atempt to reproduce my original results is failing I see the model content but it doesnt render in the view
If anyone cares its pretty simple the Ajax function's main work cant call a controller action that updates the view. However the Ajax success call can assuredly call one of the controller's ActionResults to update the view and thereafter its related Partials in that view ,,,
the controller action in tha main part of the ajax call that DOES WORK needs to be marked EmptyResult & [HttpPost]
The controller action that really fires up an ActionResult to update your view ,, in my case, just returns the view and the newly modified model... and again note its called by the Success function of the previous cited ajax function The last code posting above pretty much covers it all
So I have method in which I do some ajax:
function prodChange() {
console.log(this.value);
// ajax
var url = '#Url.Action("GetAdvProdList", "Contract")' + '?prod_id=' + this.value;
$.ajax({
url: url,
type: 'GET',
success: showAdvProd,
error: function() {
console.log("FAILSHAKUREHKGAHH");
}
});
}
The ajax returns successfully and calls this controller method.
public ActionResult GetAdvProdList(int prod_id) { // product id
// get advertising products for this product
OutlookMediaEntities1 db = new OutlookMediaEntities1();
var advsList = from printAdOption in db.print_ad_option
where printAdOption.print_product_id == prod_id
select printAdOption;
List<SelectListItem> adv_list = new List<SelectListItem>(); // list of ads
List<print_ad_option> advs = advsList.ToList(); // list from db
foreach (print_ad_option av in advs)
{
SelectListItem temp_item = new SelectListItem();
temp_item.Text = av.name;
temp_item.Value = av.print_ad_option_id.ToString();
adv_list.Add(temp_item);
}
ViewData["advproducts"] = new SelectList((IEnumerable<SelectListItem>)adv_list.ToList(), "Value", "Text");
return null;
}
I'm returning null because it doesn't work if I return View or PartialView, and I don't think I want it to return those things anyway. All I want is the viewdata stuff to be set.
The ajax worked well before I added code to use the view data. Unfortunately when I try to use the new ViewData in the ajax success method, I get this error:
"There is no ViewData item of type 'IEnumerable' that has the key 'print_ad_option_id'"
The thing is that I get this error when I first load the page, so it seems to be attempting to evaluate the "#Html.DropDownListFor..." before the showAdvProd function is called:
// called when the ajax returns a list of adv prods in a viewdata
function showAdvProd() {
// add drop down
$("#drdn1").append('#Html.DropDownListFor(m => m.print_ad_option_id, ViewData["advproducts"] as SelectList)');
}
The function that does ajax is called when an item is selected from a (different) dropdown menu, but with this error the page doesn't even load, so obviously the ajax function is never called and thus the controller method never called. So of course it won't recognize the viewdata...
I'm similarly creating a dropdown menu in another part of my form, using viewdata but without ajax, and it works fine. So I think something is wrong with my ajax or my controller method, not with how I'm using the viewdata.
Thank you in advance for any help!
The problem is that on your initial page load, the view engine will evaluate all the code blocks - anything with a '#' symbol in front of it. Thus it will try and look for a ViewData item called advproducts before it exists, even though that reference is within a javascript function that hasn't been called yet. Remember - code blocks (such as #Html.blahblahblah() are evaluated server side, while you are expecting your ajax to run on the client side, after the page has been sent to the client.
A couple of options: Returning a partial view should work. You could return a partialview that contains a dropdown and fill it from the ViewBag. That would look like this:
initial page:
...
<div id="advProductsSection"></div>
...
Your ajax would call the same function, but would return a partial view:
public ActionResult GetAdvProdList(int prod_id) { // product id
...
ViewData["advproducts"] = new SelectList((IEnumerable<SelectListItem>)adv_list.ToList(), "Value", "Text");
return View("_AdvProducts");
}
And then a partial view (Here named _AdvProducts.cshtml):
#Html.DropDownList("className", (IEnumerable<SelectListItem>) ViewBag["advproducts"])
Your ajax function would need to change to replace the div with the new partial:
success: function (result) {
$('#advProductsSection').html(result);
}
Or something like that..
A second alternative is to return JSON from the Action Method and populate a dropdown with that.
Your Controller:
...
return JSON(adv_list.ToList());
}
Then in your ajax success func:
success: function(list) {
// states is your JSON array
var $dropdown = $('#Dropdown');
$.each(list, function(i, product) {
$('<option>', {
value: list.Value
}).html(list.Text).appendTo($dropdown);
});
}
You'd need to cleat the dropdown again when prodchange is called.
Is there a way to use AJAX on a DropDownList changed event to dynamically modify a partial view on a page?
My main page has a DropDownList (DropDownListFor) and a partial view which ONLY contains a list of "items". The items shown in this partial view are dependent upon the item selected in the DropDownList. There's a 1 to many relationship between the DropDownList item and the items in the partial view. So, when the user changes the value of the DropDownList, the content in the partial view will dynamically change to reflect the item selected in the DropDownList.
Here's my DropDownList:
<div data-role="fieldcontain">
Choose Capsule:<br />
#Html.DropDownListFor(x => x.CapsuleFK, new SelectList(Model.Capsules, "pk", "name", "pk"), new { id = "ddlCapsules" })
<br />
</div>
Here's my Partial View declaration on the same page:
<div data-role="fieldcontain">
#Html.Partial("_FillerPartial", Model.Fillers)
</div>
I'm not very familiar with Ajax, but looking at other examples, here's what I have for my Ajax:
$(document).ready(function () {
$('#ddlCapsules').change(function () {
// make ajax call to modify the filler list partial view
var selection = $('#ddlCapsules').val();
var dataToSend = { cappk: selection };
$.ajax({
url: 'Process/GetFillersByCapsule',
data: { cappk: dataToSend },
success: function (data) {
alert("server returned: " + data);
}
});
});
});
And finally, here's a screenshot of what's going on. By changing the "Choose Capsule" drop down list, I want the Filler list to update dynamically:
You can load the drop down list as a partial view from the controller using ajax.
The controller code:
[HttpGet]
public virtual ActionResult GetFillersByCapsule(string cappk)
{
var model = //Method to get capsules by pk, this returns a ViewModel that is used to render the filtered list.
return PartialView("PartialViewName", model);
}
The main view html:
<div id="filteredList">
</div >
The partial view
#model IEnumerable<MyCapsuleModel>
foreach (var x in Model)
{
//Render the appropriate filtered list html.
}
And you can load the filtered list using ajax:
$('#ddlCapsules').change(function () {
// make ajax call to modify the filler list partial view
var selection = $('#ddlCapsules').val();
var dataToSend = { cappk: selection };
$.ajax({
url: 'Process/GetFillersByCapsule',
data: { cappk: dataToSend },
success: function (data) {
$("#filteredList").empty();
$("#filteredList").html(data);
}
});
});
Hope this helps.
You can't update the partial, per se, because the partial will never be rendered again without a page reload. Once you receive the HTML, ASP is done, you're on your own at that point.
What you can do, of course, is switch out the content of a particular div or whatever using JavaScript. Your example in particular screams Knockout, so that's what I would recommend using.
Change your HTML to add a data-bind to your containing div:
<div data-role="fieldcontain" data-bind="foreach: filler">
<button data-bind="text: name"></button>
</div>
And your DropDownList:
#Html.DropDownListFor(x => x.CapsuleFK, new SelectList(Model.Capsules, "pk", "name", "pk"), new { id = "ddlCapsules", data_bind = "event: { change: updateFillers }" })
Then, some JavaScript:
var FillersViewModel = function () {
var self = this;
self.fillers = ko.observableArray([]);
self.updateFillers = function () {
var selection = $('#ddlCapsules').val();
var dataToSend = { cappk: selection };
$.ajax({
url: 'Process/GetFillersByCapsule',
data: { cappk: dataToSend },
success: function (data) {
self.fillers(data.fillers) // where `fillers` is an array
}
});
}
}
var viewModel = new FillersViewModel();
ko.applyBindings(viewModel);
This is a very simplistic example, and you'll need to do some more work to make it do everything you need it to do in your scenario, but the general idea is that every time the dropdown list is changed, Knockout will call your updateFillers method, which will execute the AJAX and put new data into the fillers observable array. Knockout automatically tracks changes to this array (hence the "observable" part), so an update is automatically triggered to any part of your page that relies on it. In this scenario, that's your div containing the buttons. The foreach binding will repeat the HTML inside for each member of the array. I've used a simple button element here just to illustrate, but you would include the full HTML required to create your particular button like interface. The text binding will drop the content of name in between the opening and closing tag. Refer to: http://knockoutjs.com/documentation/introduction.html for all the binding options you have.
There's much more you could do with this. You could implement templates instead of hard-coding your HTML to be repeated in the foreach. And, you can use your partial view to control the HTML for this template. The important part is that Knockout takes the pain out of generating all this repeating HTML for you, which is why I recommend using it.
Hope that's enough to get you started.
I need to make a custom buttom in my grid that will open a modal which will render a select field with options depending on selected row.
So the user will select a row and click the button. The row id should be passed as an url parameter to my action so that it can make a query and populate the select field.
This is where I'm struggling:
navigatorExtraButtons="{
honorarios:{
title: 'Consultar honorários do processo',
caption: 'H',
icon: 'none',
onclick: function(){
var id = jQuery('#processoTable').jqGrid('getGridParam','selrow');
if (id) {
var ret = jQuery('#processoTable').jqGrid('getRowData',id);
// need to pass ret.nrProcesso as param to the URL that will load content into the modal
} else { alert('Please select a row.');}
}
},
With above code I can get the desired ID value from selected row. But I don't know how to assign it to a
<s:url... param
and populate a modal...
Thanks in advance.
I've found a solution. Posting here hoping it might help someone else.
I've ended up using plain old jquery script to get the modal to show up instead of jquery-plugin.
Just construct your action url adding desired parameter and call an ajax function:
<sj:submit id="consulta_honorarios" value="Consultar Honorários" onClickTopics="honorarios" button="true"/>
<sj:dialog
id="mydialog"
title="Consultar honorários"
autoOpen="false"
modal="true"
dialogClass="ui-jqdialog"
/>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#consulta_honorarios").click(function(){
var actionURL = '<s:property value="%{advprocselecturl}" />';
var id = jQuery('#processoTable').jqGrid('getGridParam','selrow');
if (id) {
var ret = jQuery('#processoTable').jqGrid('getRowData',id);
actionURL += '?nrProcesso=' + ret.nrProcesso;
// alert('id='+ret.nrProcesso+' / actionURL='+actionURL);
jQuery.ajax({
url: actionURL
}).done(function(data){
jQuery('#mydialog').html(data).dialog('open');
});
} else {
jQuery('<div />').html('Por favor, selecione um registro.').dialog();
}
});
});
In your action you must declare a variable with the same name as your url parameter (nrProcesso in my case) with respective getter and setter.
I am new to MVC, so sorry if I am being a bit thick. I am using VB
I am trying to fill an html drop down list using data from a db, but the first item is always selected, no matter what.
What am I doing wrong?
Here is my code - In the controller:
ViewData("MatchTypeList") = New SelectList(_db.GetMatchTypes.ToList(), "MatchTypeID", "MatchTypeName", SelectedValue)
And in the view
<%= Html.DropDownList("MatchType", CType(ViewData("MatchTypeList"), IEnumerable(Of SelectListItem)), "Any", New With {.class = "forminput"})%>
This is a problem with mvc. One work around would be to change the name of the dropdownlist to anything but the name of the property. Then, before submitting to change the name back to the true name of the property.
An example:
<script type="text/javascript">
$(function () {
$("form").submit(function () {
$("select").each(
function () {
$(this).attr("name", $(this).attr("name").replace(/ZZZ/, ''));
});
});
});
</script>
<%= Html.DropDownList("MatchTypeZZZ", CType(ViewData("MatchTypeList"), IEnumerable(Of SelectListItem)), "Any", New With {.class = "forminput"})%>
I place the javascript (it uses JQuery) in my master page so any form in the app that has a dropdownlist can safely have its name appended with ZZZ and then set back to its original name on submission.