actionlink should not submit if the check box was not checked - asp.net-mvc

i was set action link asp.net mvc grid.
like below.
when click on action link it is going to javascript function,
there i was set return false ,this false for page should not submit to action.
but cursor is going controler correspond action.
how to prevent this.
if check box was not checked only popup raise and page should not submited to action.
below is my code function actionlink:
grid.Column("Title",
format: #<text>#Html.ActionLink((string)item.Title,
"Details", "Home", new { id = item.ID }, new { onclick = "getValueUsingClass1()" })</text>),
function getValueUsingClass1() { debugger;
$(".myCssClass:checked").each(function ()
{ chkArray.push($(this).val());
var selected;
selected = chkArray.join(',') + ",";
if (selected.length > 1)
{ alert("You have selected " + selected); }
else { alert("Please at least one of the checkbox"); }
return false;
});
}

To return from function you can use return false or e.preventDefault(). You have returned from .each function take that statement outside .each or use e.preventDefault()
grid.Column("Title",
format: #<text>#Html.ActionLink((string)item.Title,
"Details", "Home", new { id = item.ID }, new { onclick = "getValueUsingClass1(event)" }
function getValueUsingClass1(e) { debugger;
$(".myCssClass:checked").each(function (){
chkArray.push($(this).val());
var selected;
selected = chkArray.join(',') + ",";
if (selected.length > 1)
{
alert("You have selected " + selected);
}
else { alert("Please at least one of the checkbox"); }
});
e.preventDefault();
//OR
return false;
}

Related

how to set selected values to a multi select dropdown list on form load in .net mvc

I am using a multi select dropdown for a particular entry, which is retrieved from a table. If I am trying to edit this entry the selected dropdown is not showing.
This is my script.
<script type="text/javascript">
$(document).ready(function () {
//$('#Supplier').click(function () {
var sku = $("#SKU").val();
alert(sku);
//var pay = null;
//alert(suppid);
$.ajax({
url: '/SKUMasterSetup/supplierlist',
type: 'POST',
dataType: 'json',
data: { id: sku },
success: function (Supplierdata) {
alert("hi");
alert(Supplierdata);
var x = Supplierdata.length();
alert(x);
//<option value="{$T.data.Value}">{$T.data.Text}</option>
//for (var i = 0; i < Supplierdata.length; i++) {
// $("#supplier").append("Selected", Supplierdata[i], "selected").attr('selected', true);
for (var i in Supplierdata) {
var optionVal = Supplierdata[i];
$("#supplier").find("option[value=" + optionVal + "]").prop("selected", "selected");
}
// $('.class1').append("<option>" + "Please select" + "</option>");
},
//error : function (Supplier) { alert("Error !"); };
});
});
</script>
And my controller code is:
[HttpPost]
public JsonResult supplierlist(int id)
{
var Supplierdata = (from item in db.SupplierSKUMaps
where item.SKU == id
select item.SupplierMaster.SupplierName).ToList();
return Json(Supplierdata, JsonRequestBehavior.AllowGet);
}
And my dropdownlist is:
#Html.DropDownList("Supplier", ViewBag.Supplier as MultiSelectList, new { #class = "chosen", #id="supplier", #multiple = "multiple" })
you could always use #Value = #Html.Action(getMyFields) and within your controller, place an action method that returns Content result(MyData.ToList()).
More information on creating dropdowns can be found here: http://odetocode.com/blogs/scott/archive/2013/03/11/dropdownlistfor-with-asp-net-mvc.aspx

Kendo Grid Edit InLine Custom Validation message e.g. for duplicate Names etc

I have an entity Location and I am using the Kendu UI Grid with InLine edit mode.
The entity owns a property DisplayName, which is required and must not exist twice in the database.
At the moment, it works to display the Required Validation message:
And it also works to build up a method CustomValidateModel called in the LocationController Ajax InLine Create method, that checks if the Name is already existing in the database and adds then a ModelError. I catch this error then in the .Events(events => events.Error("onError")) via javascript and show then the message via javascript popup.
ModelState.AddModelError("DisplayName", "Name already exists.");
And this is the crux of the matter: I don't want to have this javascript popup message. I want to have also this information below the field, like this "Field required!" message.
I have searched plenty of time, but the most people suggest only this Validation and output via javascript as it works in the moment.
Additionally, the actual problem besides the popup, is, that the record, which the user wants to create in the Grid, is then disappearing after confirming the javascript popup.
But for usability, I want that the new line and the input persists. The users should be able to edit the given Name, he wanted to save. And NOT should enter the complete line again. Only the Validation message "Name already existing." should prompt for information.
Code:
Location entity:
public class LocationDto
{
public Guid? ID { get; set; }
[Required(AllowEmptyStrings = false, ErrorMessage = "Field required!")]
public string DisplayName { get; set; }
// other properties
}
LocationController Action method:
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult CreateInline([DataSourceRequest] DataSourceRequest request, LocationDto model)
{
CustomValidateModel(model); // checks if the DisplayName is already existing in the DB
if (model != null && ModelState.IsValid)
{
// Create and Save the Model into database
}
return Json(ModelState.ToDataSourceResult());
}
javascript function:
function onError(e, status) {
if (e.errors) {
var message = "Error:\n";
$.each(e.errors, function (key, value) {
if (value.errors) {
message += value.errors.join("\n");
}
});
this.cancelChanges();
alert(message);
}
}
I hope there is a possibility to get this working in the same way. It would be fine according congruent visualization and an enhancement of usability.
We accomplished this in a Grid just like you did on the controller side by adding our custom error to the model state and passing that back to the view. And then in the onError javascript event we built the validation message ourselves and placed it in the grid.
Javascript onError:
function onError(e, status) {
if (e.errors) {
var message = "Error:\n";
var grid = $('#gridID').data('kendoGrid');
var gridElement = grid.editable.element;
$.each(e.errors, function (key, value) {
if (value.errors) {
gridElement.find("[data-valmsg-for=" + key + "],[data-val-msg-for=" + key + "]")
.replaceWith(validationMessageTmpl({ field: key, message: value.errors[0] }));
gridElement.find("input[name=" + key + "]").focus()
}
});
}
}
Then create a validationMessageTmpl (or whatever you want to call it):
var validationMessageTmpl = kendo.template($("#message").html());
<script type="text/kendo-template" id="message">
<div class="k-widget k-tooltip k-tooltip-validation k-invalid-msg field-validation-error" style="margin: 0.5em; display: block; " data-for="#=field#" data-valmsg-for="#=field#" id="#=field#_validationMessage">
<span class="k-icon k-warning">
</span>
#=message#
<div class="k-callout k-callout-n">
</div>
</div>
</script>
As far as why user input is disappearing, I assume that:
this.cancelChanges();
may have something to do with it. I believe this does just what it says and cancels all changes. Which would reset your grid and remove all user input.
One thing to note: The code in the ModelState (also the key in your $.each) must be the same name as the view model property being used for the column you want to display the error on.
With modifying of another answer and trying around, I constructed a working solution:
Location Edit.cshtml Grid Razor:
.DataSource(ds => ds
.Ajax()
.Events(e => e.Error("onError"))
.Model(m =>
{
m.Id(e => e.ID);
...
})
.Create(create => create.Action("CreateInLine", "Location"))
.Read(...)
.Update(update => update.Action("UpdateInLine", "Location"))
.Destroy(...)
)
Location Edit.cshtml js:
<script type="text/javascript">
function onError(e, status) {
if (e.errors) {
var message = "Error:\n";
var grid = $('#locationGrid').data('kendoGrid');
var gridElement = grid.editable.element;
var validationMessageTemplate = kendo.template(
"<div id='#=field#_validationMessage' " +
"class='k-widget k-tooltip k-tooltip-validation " +
"k-invalid-msg field-validation-error' " +
"style='margin: 0.5em;' data-for='#=field#' " +
"data-val-msg-for='#=field#' role='alert'>" +
"<span class='k-icon k-warning'></span>" +
"#=message#" +
"<div class='k-callout k-callout-n'></div>" +
"</div>");
$.each(e.errors, function (key, value) {
if (value.errors) {
gridElement.find("[data-valmsg-for=" + key + "],[data-val-msg-for=" + key + "]")
.replaceWith(validationMessageTemplate({ field: key, message: value.errors[0] }));
gridElement.find("input[name=" + key + "]").focus();
}
});
grid.one("dataBinding", function (e) {
e.preventDefault(); // cancel grid rebind
});
}
}
</script>
LocationController.cs
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult CreateInLine([DataSourceRequest] DataSourceRequest request, LocationViewModel model)
{
CustomValidateModel(model);
if (model != null && ModelState.IsValid)
{
var location = _repository.CreateNewInstance<Location>();
location.ID = Guid.NewGuid();
location.DisplayName = model.DisplayName;
...
_repository.SaveChanges();
model = MapToViewModel(location);
}
return Json(new[] { model }.ToDataSourceResult(request, ModelState));
}
private void CustomValidateModel(LocationViewModel model)
{
var existingEntity = _repository.GetAll<Location>()
.Where(o => o.ID != model.ID)
.Where(o => o.DisplayName.Equals(model.DisplayName))
.FirstOrDefault();
if (existingEntity != null)
{
if (existingEntity.Deleted == false)
ModelState.AddModelError("DisplayName", "Name already exists.");
else
ModelState.AddModelError("DisplayName", "Name '" + existingEntity.DisplayName + "' already exists in DB, but deleted.");
}
}
Result:
You can try this;
DisplayName: {
validation: {
required: true,
DisplayNameValidation: function (input) {
var exists = CheckName(input.val());
if (exists && input.is("[name='DisplayName']") && input.val() != "") {
input.attr("data-DisplayNameValidation-msg", "Name already exists.");
return false;
}
}
return true;
}
}
And
function CheckName(Name) {
var exists = false;
$.ajax
({
type: "POST",
url: "CheckName",
data: "{Name:'" + Name + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
error: function (msg) {
},
success: function (response) {
exists = response;
}
});
return exists;
}
For further documentation check kendo demo site for custom validation.

MVC - Load [HttpPost] view into Jquery/Ajax modal window

The way my code works currently is when a button is pressed variables are passed and Jquery unhides a modal window and makes an AJAX call to get the [HttpGet] portion of my Controller Action. This loads a form in the modal window. The modal has a save and cancel button, when the save button is pressed the form is submitted with ajaxSubmit. On successful save something is saved to the database, then a url is created and passed back to jquery and user is redirected with window.location.href.
What I'd like to have happen is when the save button is pressed the [HttpPost] part of controller action will make some logic choices, and if a certain condition is met within the action then return PartialView(model) is returned back to the modal window with an error message or pop up so that the user doesn't have to retype their information and understands why the save didn't go through and can edit quickly and try save again.
The Jquery:
var createNewClaimSetup = function () {
$(selectors.btnCreateNewClaim).live('click', function () {
var serialNumber = $(this).attr(attributes.serialNumber);
var spaRegistrationId = $(this).attr(attributes.spaRegistrationId);
var customerNumber = $(this).attr(attributes.customerNumber);
var customerStatementName = $(this).attr(attributes.customerStatementName);
$(selectors.serialNumberHidden).val(serialNumber);
$(selectors.spaRegistationIdHidden).val(spaRegistrationId);
$(selectors.customerNumberHidden).val(customerNumber);
$(selectors.customerStatementName).val(customerStatementName);
$(selectors.dialog).attr(attributes.title, 'Create New Claim');
$.ajax ({
url: inputs.warrantyClaimCreateUrl,
type: "GET",
data: {
serialNumber: serialNumber,
customerNumber: customerNumber
},
cache: false,
success: function (result) {
$(selectors.dialog).html(result.toString());
$(selectors.dialog).dialog ({
resizable: false,
height: 600,
width: 850,
modal: true,
buttons: {
'Save': function () {
// check to see if a value has been entered for problem description before submitting form
//
if(!$('#AddProblemModel_ProblemDesc').val().length==0 && (!$('#ClaimPrefix').val().length==0 || $('#chkManualClaimNum').is(':checked')))
$(selectors.createNewClaimForm).ajaxSubmit({
cache: false,
success: function (data) {
if (data.length == 0) {
location.reload();
$(selectors.dialog).dialog('close');
} else {
$(selectors.dialog).dialog('close');
window.location.href = data.redirectToUrl;
}
}
});
else{
return alert('You must select a prefix and enter a description for the problem before saving');
}
},
Cancel: function () {
$(this).dialog('close');
}
}
});
}
});
});
}
Controller Action GET (edited for brevity):
public virtual ActionResult WarrantyClaimCreateNew(string serialNumber, string customerNumber, string customerStatementName)
{
WarrantyClaimModel model = wcs.CreateNewClaimInfo(serialNumber, customerNumber, false);
ViewBag.InvalidPrefix = false;
ViewBag.DupeWaNum = false;
return View(model);
}
Controller Action POST (edited for brevity):
[HttpPost]
public virtual ActionResult WarrantyClaimCreateNew(WarrantyClaimCreateNewModel model)
{
if (ModelState.IsValid)
{
WaNumberDupeModel WAdupe = new WaNumberDupeModel(model.WarrantyClaimNumber);
// Rebuild WarrantyClaimModel object to pass back to view
WarrantyClaimModel model2 = wcs.CreateNewClaimInfo(model.SerialNumber, model.CustomerNumber, false);
// check if prefix is valid
if (WAdupe.DupeType == WaDupeType.InvalidPrefix)
{
ViewBag.InvalidPrefix = true;
return PartialView(model2);
//return Json(new { Url = Url.Action("WarrantyClaimCreateNew", model2) });
}
// check if wa number already exists
if (WAdupe.DupeExists)
{
ViewBag.DupeWaNum = true;
return PartialView(model2);
}
// create/save the new claim
if (wcs.CreateNewWarrantyClaim(model))
{
var redirectString = "WarrantyClaimDetail?warrantyClaimNumber=" + model.WarrantyClaimNumber;
if (Request.IsAjaxRequest())
{
return Json(new { redirectToUrl = redirectString }, JsonRequestBehavior.AllowGet);
}
return RedirectToAction(Actions.WarrantyClaimDetail(newClaimNumber));
}
return RedirectToAction(Actions.WarrantyClaimSaveFail());
}
else
{
return View(model);
}
}
Alerts In View If Conditions In Controller Action Met:
<%if (ViewBag.InvalidPrefix == true) { %>
alert("Please choose a valid prefix for your warranty claim number.");
<% } %>
<%if (ViewBag.DupeWaNum == true) { %>
alert("Warranty Claim Number already exists, please choose another manual WA number or try again.");
<% } %>
I haven't even been able to reload the view refreshed in the modal at all, let alone with changed to the bound model intact.
I know that the first part of the AJAX call (type: "GET") uses the URL to go into the controller action GET and gets back the return View(model) then converts it to HTML and sets the modal window HTML to it. I've been assuming that the ajaxSubmit goes back to the controller and gets the POST version of the action, and that the data part of success: function (data) should be the view return if condition is met and the built JSON URL to redirect to if it's not.
I've tried setting the modal html to data and making sure the controller invalid prefix condition is met, however the content in the modal window never seems to refresh. I'll also need to figure out how to logically tell in JQUERY if the controller returned a view or a URL through JSON but I don't think that will be hard to figure out.
I've read through a dozen or so mvc jquery ajax modal similar questions and they've helped but not
Thanks for any help shedding some light on how I might accomplish what a want here.
Sort of a partial answer to what I was looking for. I realize now my main stumbling block was to have my test alerts before building the modal window as "return alert(whatever)" which was obviously returning the alert and not running the rest of the code, dumb.
The solution I have working now is a pretty bad hack. I have it rebuild the modal and attach the POST view data to it. However this isn't looped so if you save and fail again I've set it to alert the user save failed again and to retry, then the modal closes and they can start again from scratch.
Tomorrow I'll see about turning this into a looping rather than nested structure.
New "working" JQuery code:
var createNewClaimSetup = function () {
$(selectors.btnCreateNewClaim).live('click', function () {
var serialNumber = $(this).attr(attributes.serialNumber);
var spaRegistrationId = $(this).attr(attributes.spaRegistrationId);
var customerNumber = $(this).attr(attributes.customerNumber);
var customerStatementName = $(this).attr(attributes.customerStatementName);
$(selectors.serialNumberHidden).val(serialNumber);
$(selectors.spaRegistationIdHidden).val(spaRegistrationId);
$(selectors.customerNumberHidden).val(customerNumber);
$(selectors.customerStatementName).val(customerStatementName);
$(selectors.dialog).attr(attributes.title, 'Create New Claim');
$.ajax ({
url: inputs.warrantyClaimCreateUrl,
type: "GET",
data: {
serialNumber: serialNumber,
customerNumber: customerNumber
},
cache: false,
success: function (result) {
$(selectors.dialog).html(result.toString());
$(selectors.dialog).dialog ({
resizable: false,
height: 600,
width: 850,
modal: true,
buttons: {
'Save': function () {
// check to see if a value has been entered for problem description before submitting form
//
if(!$('#AddProblemModel_ProblemDesc').val().length==0 && (!$('#ClaimPrefix').val().length==0 || $('#chkManualClaimNum').is(':checked')))
$(selectors.createNewClaimForm).ajaxSubmit({
cache: false,
success: function (data) {
if (data.length == 0) {
location.reload();
$(selectors.dialog).dialog('close');
} else if(data.redirectToUrl) {
$(selectors.dialog).dialog('close');
window.location.href = data.redirectToUrl;
} else {
$(selectors.dialog).html(data.toString());
$('#chkManualClaimNum').attr('checked','checked');
$('#manualClaimInfo').toggle();
$(selectors.dialog).dialog ({
resizable: false,
height: 600,
width: 850,
modal: true,
buttons: {
'Save': function () {
if(!$('#AddProblemModel_ProblemDesc').val().length==0 && (!$('#ClaimPrefix').val().length==0 || $('#chkManualClaimNum').is(':checked')))
$(selectors.createNewClaimForm).ajaxSubmit({
cache: false,
success: function (data) {
if (data.length == 0) {
location.reload();
$(selectors.dialog).dialog('close');
} else if(data.redirectToUrl) {
$(selectors.dialog).dialog('close');
window.location.href = data.redirectToUrl;
} else {
alert('Save failed again. Please start over.');
$(selectors.dialog).dialog('close');
}
}
});
},
Cancel: function () {
$(this).dialog('close');
}
}
});
}
}
});
else{
return alert('You must select a prefix and enter a description for the problem before saving');
}
},
Cancel: function () {
$(this).dialog('close');
}
}
});
}
});
});
}
This does at least show how to pass the POST view back to the modal window.

Pass checkboxes to controller asp.net mvc

I have some images that every images has a checkbox beside like this :
<input type="checkbox" name="select" value="<%=item.Id%>" />
Now I want to send the selected checkboxes to controller by clicking a hyperlink. I have :
<a href='<%: Url.Action("DeleteSelected", "Product", new { #ShopID = ViewBag.shopIDempty } ) %>'>Delete</a>
and in controller:
public ActionResult DeleteSelected(int[] select, int ShopID)
{
foreach (int checkBoxSelected in select)
{
//Do something...
}
return RedirectToAction("Index");
}
But nothing pass to int[] select and it is null always. What is wrong?
Do these==>
1) Make an array which contains the selected checkbox value
var delete= new Array();
$('.checkboxed').live('click', function () {
if ($(this)[0].checked == true) {
var itemdel= $(this).val();
delete.push(itemdel);
} else {
var remve = $(this).val();
for (var i = 0; i < delete.length; i++) {
if (delete[i] == remve) {
delete.splice(i, 1);
break;
}
}
}
});
2)Make an ajax call on clicking the hyper link
$.ajax({
type: 'POST',
contentType: 'application/json; charset=utf-8',
url: '/Product/DeleteSelected'
+ '?ShopID =' + ShopIdValue,
dataType: 'json',
data: $.toJSON(delete),
success: function (result) {
window.location.href=result;
},
async: false,
cache: false
});
3) Make your Action Like this
public ActionResult DeleteSelected(int[] select)
{
var shopid= Request["ShopID "];
}
Try this:
[HttpPost]
public ActionResult DeleteSelected(FormCollection collection)
{
try
{
string[] test = collection.GetValues("select");
}
catch (Exception ex)
{
return null;
}
}
I do want to note that the approach you are taking requires a form to wrap the all of the checkboxes or you need to specifically build an object to send to the controller as Syed showed. If you go the form approach, you will need to either use the a link to trigger the form submit or convert the a link to a submit button and have a hidden field for the ShopID.

Delete with confirmation and redirect on success

Here's the behavior I'm looking for:
User selects a record from an index view, which redirects to that record's detail view.
User clicks a link to delete the currently displayed record.
A modal dialog asks for confirmation of the delete.
User presses the Confirm button.
The associated controller action method is executed, which is supposed to delete the record.
User is returned to the index view, where the deleted record is no longer displayed.
I am using ASP.NET MVC 1.0 as the primary framework, the dialog component from the jQuery UI, and LINQ-to-SQL to handle database interaction. Steps one through four execute just fine. Step five, however, retrieves the record, but doesn't delete it. Step six executes, but the record is still displayed in the list.
Here is the code for the delete link:
<% if (Model.CanDelete())
{ %>
<%= Html.ActionLink("Delete", "Delete", new { id = Model.Package_ID },
new { onclick = string.Format("deletePackage({0}); return false;", Model.Package_ID) })%> |
<% } %>
Here is the code for the onclick handler:
function deletePackage(packageID) {
createDialogContent(); // The HTML for the dialog content is set in this method
$.getJSON('/Spectrum/Package/DetailsJSON/' + packageID, function(json) {
$('p.message').html('Delete <strong>' + json.Description + '</strong>?');
});
$('div.confirm').attr('title', 'Delete Package');
$('div.confirm').dialog({
draggable: false,
modal: true,
overlay: {
backgroundColor: '#000',
opacity: 0.5
},
resizable: false,
buttons: {
'Confirm': function() {
$(this).dialog('destroy').remove();
$.post('/Spectrum/Package/Delete/' + packageID);
// The next line used to be: $.get('/Spectrum/Package/Index');
window.location.href = '/Spectrum/Package/Index';
},
Cancel: function() {
$(this).dialog('destroy').remove();
}
}
});
}
Here is the code for the delete controller method:
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Delete(int id)
{
Package package = RepositoryManager.Package().GetPackage(id);
PackageDeleteViewModel viewModel = new PackageDeleteViewModel
{
Package_ID = package.Package_ID
};
RepositoryManager.Package().PackageDelete(viewModel); // see code below
return new EmptyResult();
}
Finally, here is the repository method for the delete:
public void PackageDelete(PackageDeleteViewModel data)
{
Package package = RepositoryManager.Package().GetPackage(data.Package_ID);
if (package.BrokerageOrderPackages.Count == 0
&& package.ManagementOrderPackages.Count == 0
&& package.Seeds.Count == 0)
{
db.Packages.DeleteOnSubmit(package); // This branch is being executed
db.SubmitChanges();
}
else
{
throw new RulesException("Package cannot be deleted.", "PackageDelete");
}
}
I don't think I'm pushing the envelope here or getting too fancy. One area of concern: In the Confirm button handler of the onclick method, the first version would delete the record successfully, but not redirect to the Index view. With the current version, the delete fails silently, but the redirection occurs. Firefox/Firebug reported 200's for the Index GET in both situations. The behavior is similar in both Firefox and IE.
$.post is an async ajax request, if you reload the page the call gets cancelled. You should reload the page on its callback function parameter:
$.post('/Spectrum/Package/Delete/' + packageID,
null,
function(json){
if (json.success) {
window.location.href = '/Spectrum/Package/Index';
} else {
// jquery dialog call or
alert(json.errorMessage);
}
},
'json');
And the controller code:
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Delete(int id)
{
try {
// Validation and deletion code
} catch exception ex {
return Json(new {errorMessage = ex.Message, success = false});
}
return Json(new {success = true});
}

Resources