this is my button:
#Html.ActionLink("Deletar", "Deletar", new { id = item.ID })
I tried to make a confirm question with Ajax like this
#using (Ajax.BeginForm(
"AjaxAction",
new AjaxOptions {OnBegin ="Deletar",Confirm="Você realmente deseja isso?" }))
{ #Html.ActionLink("Deletar", "Deletar", new { id = item.ID },new { id = "Deletar" }) }
it does not work? what can i do?
With standard link:
#Html.ActionLink(
"Deletar",
"Deletar",
new { id = item.ID },
new { onclick = "return confirm('Você realmente deseja isso?');" }
)
or if you want to use an AJAX link:
#Ajax.ActionLink(
"Deletar",
"Deletar",
new { id = "item.ID" },
new AjaxOptions { OnBegin = "Deletar", Confirm = "Você realmente deseja isso?" }
)
or an AJAX form:
#using (Ajax.BeginForm("AjaxAction", new { id = item.ID }, new AjaxOptions { OnBegin = "Deletar", Confirm = "Você realmente deseja isso?" }))
{
<input type="submit" value="Deletar" />
}
Related
I am trying to upload image using Ajax.BeginForm but in my controller the file shows null.
My code is:
#using (Ajax.BeginForm("Create", "PriceManager", new AjaxOptions
{
HttpMethod = "Post",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "PriceList",
OnSuccess = "ClearInputField",
OnFailure = "Fail",
OnComplete = "Complete"
}, new { enctype= "multipart/form-data" }))
I even tried using Html.Begin :
#{
var attributes = new Dictionary<string, object>();
attributes.Add("data-ajax-complete ", "Complete");
attributes.Add("data-ajax-mode", "replace");
attributes.Add("data-ajax-update ", "#PriceList");
attributes.Add("id", "form0");
attributes.Add("enctype", "multipart/form-data");
attributes.Add("data-ajax", "true");
}
#using (Html.BeginForm("Create", "ProductManager", FormMethod.Post,attributes))
Still the file value remain null. Any idea what I am doing wrong here.
Thanks
Try this:
#using (Ajax.BeginForm("About", "Home", new AjaxOptions
{
HttpMethod = "Post",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "PriceList",
OnSuccess = "ClearInputField",
OnFailure = "Fail",
OnComplete = "Complete"
}, new { enctype = "multipart/form-data" }))
{
<input type="file" name="flResim" />
<input type="submit" value="send" />
}
I tried and worked.
I have been using Ajax to show partial pages in my application.
I would like to ask if it's possible to set the display to none when the user click again the link generated by #Ajax.ActionLink()?
Here's my code:
#model IEnumerable<RMSystem.Models.rms_referred_vw>
<table id="example">
<tbody>
#foreach(var rfp in Model){
<tr>
<td>
#Ajax.ActionLink(Convert.ToString(rfp.rf_id), "Edit_Ref", new { rf_id = rfp.rf_id },
new AjaxOptions
{
HttpMethod = "POST",
InsertionMode = InsertionMode.InsertBefore,
UpdateTargetId = "target6",
}, new {#style="color:darkblue", title = "Edit Referred Person"})
</td>
<td>#Html.DisplayFor(model => rfp.rf_badgeno)</td>
// more table cells
<td>
#Ajax.ActionLink("Details", "Details", new { rf_id = rfp.rf_id },
new AjaxOptions
{
HttpMethod = "GET",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "show",
}, new {#style="color:darkblue", title = "Show More Details"})
</td>
</tr>
}
</tbody>
</table>
<div id="target6"></div>
<div id="show" style="width:250px;height:200px;margin-left:1000px;"></div>
That's my code Sir.
Controller:
public ActionResult Details(int rf_id = 0)
{
var check = db.rms_approval_route_vw.Where(s => s.rf_id == rf_id).FirstOrDefault();
try
{
if (check != null)
{
return PartialView(check);
}
}
catch (Exception) {
throw;
}
return Content("<script type='text/javascript'>alert('Waiting for regularization.');</script>");
}
Remove your #Html.ActionLink() and replace with (note the code below is for the 2nd link)
<td>Details<td>
and add a script
var details = $('#show');
$('.details').click(function() {
var self = $(this);
// Check if we have already loaded it
if (self.data('loaded'))
{
details.empty(); // clear contents
self.removeData('loaded'); // signal is no longer loaded
} else {
$.get('#Url.Action("Details")', { rf_id: $(this).data('id') }, function(data) {
details.html(data); // update the DOM
self.data('loaded', true); // signal its been loaded
});
}
});
I have a panelbar with some items and I want to set the action associated to them to be performed by Ajax.
Example code:
So far I have this (no ajax):
#(Html.Kendo().PanelBar()
.Name("left-menu-module")
.Items(items =>
{
items.Add()
.Text("<div class=\"text-item-container\"><span class=\"left-menu-module-level1-text\">" + "item1" + "</span></div>").Encoded(false)
.ImageUrl("link to an icon")
.ImageHtmlAttributes(new { width = 30 })
.Action("Action1", "Controller");
items.Add()
.Text("<div class=\"text-item-container\"><span class=\"left-menu-module-level1-text\">" + "item2" + "</span></div>").Encoded(false)
.ImageUrl("link to an icon")
.ImageHtmlAttributes(new { width = 30 })
.Action("Action1", "Controller");
}))
This generate something like:
//...
<li class="k-item k-state-default" role="menuitem">
<a class="k-link k-header" href="/MyController/Action1">
<img alt="image" class="k-image" src="link to an icon" width="30"><div class="text-item-container"><span class="left-menu-module-level1-text">item1</span></div>
</a>
</li>
//...
But I would like to have something like:
//...
<li class="k-item k-state-default" role="menuitem">
<a class="k-link k-header" href="/MyController/Action1" data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#target">
<img alt="image" class="k-image" src="link to an icon" width="30"><div class="text-item-container"><span class="left-menu-module-level1-text">item1</span></div>
</a>
</li>
//...
So, it's something similar to Ajax.ActionLink() helper.
How can I achieve that?
I have found solution for this..
Use content section inside div.
#(Html.Kendo().PanelBar()
.Name("panelbar")
.ExpandMode(PanelBarExpandMode.Single)
.Items(panelbar =>
{
panelbar.Add().Text("Client Info")
.Expanded(true)
.Content(
#<div>
#Ajax.ActionLink("Organization Detail", "OrganizationDetail", "SetupSystem", null, new AjaxOptions { UpdateTargetId = "divBody", LoadingElementId = "divLoading" }, new { id = "btnOrgDetails", #class = "list-group-item" })
#Ajax.ActionLink("Benefit Center", "GetBenefitsOverview", "SetupSystem", null, new AjaxOptions { UpdateTargetId = "divBody", LoadingElementId = "divLoading" }, new { id = "btnBenefitCenter", #class = "list-group-item"})
#Ajax.ActionLink("Services", "ServiceFilter", "SetupSystem", null, new AjaxOptions { UpdateTargetId = "divBody", LoadingElementId = "divLoading" }, new { id = "btnServices", #class = "list-group-item" })
#Ajax.ActionLink("Key Dates", "GetKeyDatesOverview", "SetupSystem", null, new AjaxOptions { UpdateTargetId = "divBody", LoadingElementId = "divLoading" }, new { id = "btnKeyDates", #class = "list-group-item" })
</div>);
}); )
I actually solved this using a function that was added in one of the recent Telerik updates:
#(Html.Kendo().PanelBar()
.Name("left-menu-module")
.Items(items =>
{
items.Add()
.Text("<div class=\"text-item-container\"><span class=\"left-menu-module-level1-text\">" + "item1" + "</span></div>").Encoded(false)
.ImageUrl("link to an icon")
.ImageHtmlAttributes(new { width = 30 })
.Action("Action1", "Controller")
.LinkHtmlAttributes(/* Anonymous object OR Dictionary with the data- attributes */);
}))
I'm using kendo version 2014.3.1316.440.
I'm having some trouble setting up the routing to a custom controller in Orchard.
I've created a View:
#model dynamic
#{
Script.Require("jQuery");
}
#using (Html.BeginForm("Send", "Email", FormMethod.Post, new { id = "contactUsForm" }))
{
<fieldset>
<legend>Contact Us</legend>
<div class="editor-label">Name:</div>
<div class="editor-field">
#Html.TextBox("Name", "", new {style = "width: 200px"})
</div>
<div class="editor-label">Email Address:</div>
<div class="editor-field">
#Html.TextBox("Email", "", new {style = "width: 200px"})
</div>
<div class="editor-label">Telephone Number:</div>
<div class="editor-field">
#Html.TextBox("Telephone", "", new {style = "width: 200px"})
</div>
<div class="editor-label">Message:</div>
<div class="editor-field">
#Html.TextArea("Message", "", new {style = "width: 200px"})
</div>
<br/>
<input id="ContactUsSend" type="button" value="Submit" />
</fieldset>
}
#using (Script.Foot()) {
<script>
$(function() {
$('#ContactUsSend').click(function () {
alert('#Url.Action("Send", "Email")');
var formData = $("#contactUsForm").serializeArray();
$.ajax({
type: "POST",
url: '#Url.Action("Send", "Email")',
data: formData,
dataType: "json",
success: function (data) {
alert(data);
}
});
});
});
</script>
}
With a Controller:
public class EmailController : Controller
{
[HttpPost]
public ActionResult Send()
{
var orchardServices = DependencyResolver.Current.GetService<IOrchardServices>();
var messageHandler = DependencyResolver.Current.GetService<IMessageManager>();
var svc = new ContactUsService(orchardServices, messageHandler);
svc.DoSomething();
return new EmptyResult();
}
}
And setup the route:
public class Routes : IRouteProvider {
public void GetRoutes(ICollection<RouteDescriptor> routes) {
foreach (var routeDescriptor in GetRoutes()) {
routes.Add(routeDescriptor);
}
}
public IEnumerable<RouteDescriptor> GetRoutes() {
return new[] {
new RouteDescriptor {
Priority = 15,
Route = new Route(
"ContactUsWidget",
new RouteValueDictionary {
{"area", "ContactUsWidget"},
{"controller", "Email"},
{"action", "Send"}
},
new RouteValueDictionary(),
new RouteValueDictionary {
{"area", "ContactUsWidget"}
},
new MvcRouteHandler())
}
};
}
}
But when I click the submit button, it tries to post to
OrchardLocal/Contents/Email/Send
and obviously fails. Can anyone point me in the direction of what I'm doing wrong?
Try this:
#using (Html.BeginForm("Send", "Email", new { area = "Your.Module" }, FormMethod.Post, new { id = "contactUsForm" }))
Adding the area is like an extra clause that ensures only your module is searched for a matching controller/action method pair.
I want to transfer model data from one View to another View (in a dialog) using Ajax.Actionlink were i am getting null values on Post Action
This is my View
#using (Ajax.BeginForm("", new AjaxOptions { }))
{
for (int i = 0; i < Model.city.Count; i++)
{
<div class="editor">
<p>
#Html.CheckBoxFor(model => model.city[i].IsSelected, new { id = "check-box-1" })
#Html.HiddenFor(model => model.city[i].Id)
#Ajax.ActionLink(Model.city[i].Name, "PopUp", "Home",
new
{
#class = "openDialog",
data_dialog_id = "emailDialog",
data_dialog_title = "Cities List",
},
new AjaxOptions
{
HttpMethod = "POST"
})
#Html.HiddenFor(model => model.city[i].Name)
</p>
</div>
}
}
On using Ajax.Actionlink i am creating a dialog using ajax scripting
My controller class for this View is
public ActionResult Data()
{
var cities = new City[] {
new City { Id = 1, Name = "Mexico" ,IsSelected=true},
new City { Id = 2, Name = "NewJersey",IsSelected=true },
new City { Id = 3, Name = "Washington" },
new City { Id = 4, Name = "IIlinois" },
new City { Id = 5, Name = "Iton" ,IsSelected=true}
};
var model = new Citylist { city = cities.ToList() };
//this.Session["citylist"] = model;
return PartialView(model);
}
another View for displaying Post action data is
#model AjaxFormApp.Models.Citylist
#{
ViewBag.Title = "PopUp";
}
<h2>
PopUp</h2>
<script type="text/javascript">
$(function () {
$('form').submit(function () {
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (result) {
var checkedAtLeastOne = false;
$('input[id="check-box-2"]').each(function () {
if ($(this).is(":checked")) {
checkedAtLeastOne = true;
// alert(checkedAtLeastOne);
}
});
if (checkedAtLeastOne == true) {
// alert("Test");
$('#div1').show();
$(".dialog").dialog("close");
}
else {
// alert("NotSelected");
$('#div1').hide();
$('#popUp').html(result);
$('#popUp').dialog({
open: function () { $(".ui-dialog-titlebar-close").hide(); },
buttons: {
"OK": function () {
$(this).dialog("close");
}
}
});
}
}
});
return false;
});
});
</script>
<div style="display: none" id="div1">
<h4>
Your selected item is:
</h4>
</div>
#using (Ajax.BeginForm(new AjaxOptions { }))
{
for (int i = 0; i < Model.city.Count; i++)
{
<div class="editor">
<p>
#Html.CheckBoxFor(model => model.city[i].IsSelected,new { id = "check-box-2" })
#Html.HiddenFor(model => model.city[i].Id)
#Html.LabelFor(model => model.city[i].Name, Model.city[i].Name)
#Html.HiddenFor(model => model.city[i].Name)
</p>
</div>
}
<input type="submit" value="OK" id="opener" />
}
#*PopUp for Alert if atleast one checkbox is not checked*#
<div id="popUp">
</div>
and my post controller action result class is
[HttpPost]
public ActionResult PopUp(Citylist model)
{
if (Request.IsAjaxRequest())
{
//var model= this.Session["citylist"];
return PartialView("PopUp",model);
}
return View();
}
My model class is
public class City
{
public int Id { get; set; }
public string Name { get; set; }
public bool IsSelected { get; set; }
}
public class Citylist
{
public IList<City> city { get; set; }
}
You are calling Popup action from actionlink. Instead you should place submit button out of for loop. And give your form right action parameters