I have an code segment of view .cshtml page like :
#Html.ActionLink("Add Charts of Account", "Save")
Run mode i can see following HTML Code:
Add Charts of Account
But i want to following html code :
<a id="lblAddNode" href="/ChartsOfAccount/Save">Add Charts of Account</a>
is it possible? If possible please explain with example code.
There's an overload of the ActionLink helper which allows you to specify routeValues and htmlAttributes:
#Html.ActionLink(
"Add Charts of Account", // linkText
"Save", // actionName
null, // routeValues
new { id = "lblAddNode" } // htmlAttributes
)
Related
I'm trying to get a partial view to load on my current view when the user clicks the link but it keeps loading the partial view rather then on the same view.
Not sure what I'm missing.
Main View Controller
public PartialViewResult MonitorDetail(MonitorType mType)
{
return PartialView("MonitorDetail", mType);
}
Main View
<script src="~/Scripts/jquery-2.1.1.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<p class="lbutton radius">
#Ajax.ActionLink("SQL Cluster Online ", "MonitorDetail", "NOCCon", MonitorType.AHSSQLCluster, new AjaxOptions() { UpdateTargetId = "monitorDetail" })
<span class="lbutton-addition #(Model.SQLClusterOnline ? "online" : "offline")">
#(Model.SQLClusterOnline ? "Online" : "Offline")
</span></p>
<div id="monitorDetail"></div>
Partial View
#model PAL.Intranet.MonitorType
<div>
You choose #Model.ToString()
</div>
Also keeps telling me mType is null but i'm passing it MonitorType in the ActionLink so I added it as nullable so I can try and figure out the first issue and then work on the second.
If its displaying only the partial view, its because you have not included the required files for Ajax.ActionLink to work (and its just performing a normal redirect). Ensure you have included jquery.{version}.js and jquery.unobtrusive-ajax.js
The reason parameter mType is null is because you are not passing a value. It should be
#Ajax.ActionLink("SQL Cluster Online ", "MonitorDetail", "NOCCon", new { mtype = MonitorType.AHSSQLCluster }, new AjaxOptions() ....)
After Using the Ajax.ActionLink As
#Ajax.ActionLink("Edit", "AddEdit", new { #id = id, #recId = item.EncyclopediaID }, new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "listForm" }, new { #class = "edit_icon", #title = "edit this item" })
And When Controller Go to AddEdit Page There i have Uploaded the File and want to show the Ckeditor.
So i use
#using (Html.BeginForm("AddEdit", "Encyclopedia", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
/////////other code//////////////////
#Html.EditorFor(model => model.Description,"CKEditor")
}
Now if i use to show the #Html.ActionLink instead of #Ajax.Actionlink Ckeditor Shows perfectly and in Ajax call it showed like a textarea.
Please Help.
this happens because resource files required for ckeditor to work correctly (eg: css , javascript) cannot be downloaded with an ajax call.
try referencing the required resource files in layout view page and try again.
Edit :
maybe you have placed integration code in document.ready function, thus after ajax request completed and you markup changed, the new markup (eg:your new input element) is not configured as ckeditor input.so try calling ckeditor integration code after ajax success.
I have a form which loads within a fancybox so that if the user clicks on a link, a form loads up in fancybox, its an #Ajax.BeginForm(). Like so:
#using (Ajax.BeginForm("AddToBasket", new { controller = "Orders" }, new AjaxOptions()
{
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "SuccessBasket",
OnSuccess = "goToCheckout"
}, new { #class = "product-order-form" }))
{
#* Form elements for Model *#
<div id="SuccessBasket"></div>
}
This gets loaded up in a fancybox window. When I submit the form, my SuccessBasket div does not get updated with the new content passed from the controller, is there some way to enable Ajax calls to be updated within Fancybox? This works fine if I don't use fancybox but I wish to use it.
EDIT:
The form is loaded like so:
#Ajax.ActionLink("Order", "OrderProduct", new { controller = "Orders", id = ViewData["ID"], search = ViewData["search"] }, new AjaxOptions()
{
UpdateTargetId = "ModalWindow",
InsertionMode = InsertionMode.Replace,
OnFailure = "NotAuthorised"
}, new { #class = "lightbox order-link" })
I have an empty div called ModalWindow which is wrapped by a div set to display: none as per the instructions:
<div style="display: none">
<div id="ModalWindow">
</div>
</div>
OrderProduct Action in my controller returns a PartialView:
return PartialView("_OrderProduct", basket);
Where basket is my model BasketModel basket = new BasketModel();
My _OrderProduct PartialView is the view which contains the Ajax form at the start of my post. Which has the SuccessBasket div.
Upto this point, it works perfectly. The form loads up in fancybox.
The AddToBasket Action returns a PartialView:
return PartialView("_BasketSuccess");
This view simply tells the user that their item was added to the basket:
<p>This item has been added to your basket. Search again or goto #Html.ActionLink("checkout", "Order", new { controller = "Orders" }, new { #class = "checkout-link" }) to continue.</p>
The problem is, the SuccessBasket div does not update with the text above but through debugging, I can see that it does load the view _BasketSuccess, it just doesn't update in the modal window.
The way you are loading the fancybox is strange. You are sending 2 AJAX requests: one for the Ajax.ActionLink and one by the fancybox. All that is not necessary. Also you don't need a hidden div in your main view, the fancybox does all this automatically.
So to recap, in your main view all you need is a simple HTML link to the controller actin which will return a partial containing the form:
#Html.ActionLink("Order", "OrderProduct", "Orders", null, new { #class = "lightbox" })
and in a separate javascript file you will attach the fancybox to this anchor so that when it is clicked it will automatically send an AJAX request (the fancybox, not you), fetch the partial form and show it:
$(function () {
$('.lightbox').fancybox();
});
Alright, now you have a partial form shown in a fancybox. This partial form is actually an Ajax.BeginForm. So when you submit this form it will send an AJAX request to the AddToBasket action and upon success it will update the <div id="SuccessBasket"></div> which is inside this form with the result returned by this action.
I have a strongly typed view which is uses an IEnumerable as its model.
There's a bool property on the model which I'm rendering in a MVC WebGrid in a checkbox which the user can then check or uncheck.
On submit it gets to my action method but how do I get the checked checkboxes?
If I look at the Request.Params, I see all the checked checkboxes coming back as parameters. Is there any easy way for the DefaultModelBinder to convert these back into my IEnumerable, or do I have to do this by hand?
Here's my View so far:
#model IEnumerable<XXX.XXXItemDto>
<div id="items">
#using (Ajax.BeginForm("SaveEvents", "MyController", new AjaxOptions { UpdateTargetId = "items" }))
{
var grid = new WebGrid(Model, canPage: false, canSort: false);
#grid.GetHtml(columns: grid.Columns(
grid.Column("itemDescription", header: "Event"),
grid.Column("acknowledged", format: #<text><input name="Acknowledged_#(item.staffItemOid)" type="checkbox" value="#item.staffItemOid" #(item.acknowledged ? "Checked" : null)/> </text>, header: "Acknowledged")
))
#Html.SubmitButton("Save")
}
</div>
Here is my quandary. I have an MVC 3 web site, and I have a page that needs to contain a sub-form, if you will, to collect some data related to my model. I have successfully created a partial view that contains the markup and I am rendering this properly. However, the input button in the partial view doesn't seem to be doing much of anything. Here is the form in the partial view:
#using (Ajax.BeginForm("AddProductCustomField", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "addCustomFieldView" }))
{
#Html.DropDownListFor(m => m.SelectedCustomFieldId, new SelectList(Model.CustomFields, "FieldId", "FieldName"), "-- Select One --", new { #class = "int_std_select" })<text> </text>
#Html.TextBoxFor(m => m.CustomFieldValue, new { #class = "int_std_textbox" })
<input type="submit" value="Add Custom Field" /><br />
}
"AddProductCustomField" is the name of my controller method that I want to handle this form post. However, clicking the submit button does nothing. I even popped open Fiddler to see if a request was getting eaten and nothing. I've included all the appropriate JavaScript files for this page (MicrosoftAjax, MicrosoftMvcAjax and the unobtrusive JavaScript). I'm stumped.
Please let me know if I need to provide more info. Thanks much, this has been stumping me for days!
You mentioned sub-form. Do you literally mean you are nesting forms? This is not supported in HTML, so I would think that's probably the source of your problem.