On my view I have some fields which are rendered conditionally. The fields are nullable booleans so I am using 'EditorFor()' with custom editor template for boolean (if this is important)
<div class="form-group">
#Html.LabelFor(m => m.HasAccount, new { #class = "col-sm-3 control-label" })
<div class="col-sm-9">
#Html.EditorFor(m => m.HasAccount)
</div>
</div>
<hr class="dotted" />
#if (Model.HasAccount2)
{
<div class="form-group">
#Html.LabelFor(m => m.ExtraField, new { #class = "col-sm-3 control-label" })
<div class="col-sm-9">
#Html.EditorFor(m => m.ExtraField)
</div>
</div>
<hr class="dotted" />
}
#Html.HiddenFor(m => m.ExtraField)
<div class="form-group">
#Html.LabelFor(m => m.Options, new { #class = "col-sm-3 control-label" })
<div class="col-sm-9">
<div class="input-group">
#Html.DropDownListFor(m => m.OptionID, Model.OptionsSelectList, "Choose an Option", new { #class = "form-control chosen-select" })
</div>
</div>
</div>
$('#Options').change(function () {
$.ajax({
url: '#Url.Action("ProcessOptions", "Home")',
type: "POST",
data: $('#ProcessForm').serialize(),
error: function (xhr, ajaxOptions, thrownError) {
alert("error");
},
success: function (result) {
$('#divContainer').html(result.ViewString);
}
});
});
Now when the View is posted then according to some condition in the controller I set the value of ExtraField to true or false. The controls for ExtraField will not be rendered unless the value for HasAccount2 is true so to store the value I use the HiddenFor() for ExtraField so that when the form is posted again then ExtraField is passed as true and not null because it is not rendered.
Now the HiddenFor() does not have any value which is returned from the model. How can I store the value for ExtraField as hidden in this scenario?
Edit
There is a dropdownlist on the view. The view is posted using JQuery Ajax when the select index of dropdownlist is changed. The model is passed to the controller and processed and the partial view is returned with model as Json. Below is the controller method,
[HttpPost]
public ActionResult ProcessOptions(MyOptions model)
{
if (model.OptionID == 1)
{
model.HasAccount2= true;
}
else if (model.OptionID == 3)
{
model.ExtraField = true;
}
return Json(this.RenderPartialViewToString("_Options", model););
}
The method RenderPartialViewToString is just converting the PartialView as string. It all works fine except the ExtraField. Now as you can see that based on some condition I am rendering ExtraField when HasAccount2 is set to true so that User can select true or false by himself but incase OptionID is 3 then I don't want the ExtraField checkbox to be rendered rather I want to set it explicitly from controller and store it in HiddenField so that when user submit the form for save then the ExtraField value is also passed.
Related
For example, in my project I'm using #using(Html.BeginForm(some stuff))to create an instance of my model and finally appending it to my database. But, when I'm editing (updating) some object of model, I'm usingn ajax get to retrieve data and finally using #Html.BeginForm() to post the update. Well, this is breaking some pattern of coding in MVC or whatever good principle?
Retrieving data and filling in the input fields
$.ajax({
url: "../../Obra/" + id,
type: "POST",
success: function(data) {
var obj = JSON.parse(JSON.stringify(data));
tit.value = obj.titulo;
ed.value = obj.editora;
obj.autores.forEach(x => {
var newn = divAutor.appendChild(aut.cloneNode());
newn.value = x;
});
img.value = obj.imagem;
divAutor.removeChild(aut);
},
error: function() {
alert('Error.');
}
});
All modal:
<div class="modal" id="modalOverlay">
<div class="modal-content" id="modalContent">
<header class="modal-header">
<h1 id="updateObraModalTitulo"></h1>
</header>
#using(#Html.BeginForm("Update", "Obra", FormMethod.Post, new { id="form-update" })) {
<div class="updateObraDivProp">
#Html.LabelFor(m => m.Titulo, "Título:")
#Html.TextBoxFor(m => m.Titulo, new { #class="editInputValue", #id="editTituloInput" })
</div>
<div class="updateObraDivProp">
#Html.LabelFor(m => m.Editora, "Editora:")
#Html.TextBoxFor(m => m.Editora, new { #class="editInputValue", #id="editEditoraInput"})
</div>
<div class="updateObraDivProp">
#Html.LabelFor(m => m.Autores, "Autores:")
<div id="divInputAutores">
#Html.TextBoxFor(m => m.Autores, new { #class="inputPostValue", id="addAutoresInput"})
</div>
<div class="btnNewAutorOp">
<button type="button" id="btnAddAutor" onclick="addNewAutor()">+</button>
<button type="button" id="btnDeleteAutor" onclick="deleteNewAutor()">×</button>
</div>
</div>
<div class="updateObraDivProp">
#Html.LabelFor(m => m.Imagem, "Imagem:")
#Html.TextBoxFor(m => m.Imagem, new { #class="inputPostValue", #id="editImagemInput" })
</div>
<input type="submit">
}
</div>
</div>
Because I can't retrieve the Id property when I click in the modal with mvc (or maybe I can using partial views?), I'm using javascript to create a function with the param id and getting data with ajax and finally updating with form
When I try to add Ajax to pass another data into my action controller my model parameter was affected the value was null and my Ajax parameter has a value. I do not think it is because I am using Html.beginform('index', 'payable') and I used Ajax url: '#Url.Action("index", "payable")', with the same ActionResult.
You can see the reference below.
#using (Html.BeginForm("index", "payable", FormMethod.Post, new { enctype = "multipart/form-data" }))<div class="col-md-2">
<div class="form-group">
#Html.LabelFor(x => x.Amount, new { #class = "form-label" })
#Html.TextBoxFor(x => x.Amount, new { #class = "form-control" })
</div>
</div>
<div class="col-md-2">
<div class="form-group">
#Html.LabelFor(x => x.ImagePath, new { #class = "form-label" })
<input type="file" name="file" id="files" />
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<button type="submit" id="btnUpload" class="btn btn-primary btn-sm" onclick="saveSelected()"><i class="fas fa-save"></i> Submit Payment</button>
</div>
</div>{
My Ajax
function saveSelected() {
$.ajax({
url: '#Url.Action("index", "payable")',
type: 'POST',
data: { ids: ids },
traditional: true,
success: function (data) {
alert("success");
}
});
}
My Controller
public ActionResult Index(PayableFormModel model, HttpPostedFileBase file, int[] ids)
{
return View();
}
Html.Beginform and ajax cannot use at same time,even you add a
onclick function. So the ajax won't work and all data are submitted
by form. If you want to submit model and any other data, put all them into form or only use ajax.
When you upload file, model cannot get file's name or path directly. You should store file into a folder or directory,then assign this path to model's imagepath.(Examle code is blew)
In index page, {} should follow using(), otherwise it will report error.
public ActionResult Index(PayableFormModel model,HttpPostedFileBase file,int[] ids)
{
string filepath = Server.MapPath("~/image/");
Directory.CreateDirectory(filepath);
file.SaveAs(Path.Combine(filepath, file.FileName));
model.ImagePath = filepath + file.FileName ;
return View();
}
I need to post back the items that the user added in the DevExpress ListBox, but, according to the company, the way to do it is to store the items in a hidden field and then submit it. I need to know how to create this hidden field, in the view, which, I believe, needs to be a List with Text and Value, (similar to the model passed) and then how to assign the values to it in jquery.
Notes:
1. The question is not how to create a hidden field, but that specific type.
2. The way it is now, in the controller, the model comes back as null.
// This code is located in the Index.cshtml page
<div id="modalMain" class="modal fade hidden-print" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" style="padding-bottom:0;padding-top:0">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div id="modalMainData" class="modal-body" style=" padding: 0 10px 0 10px !important;">
</div>
</div>
</div>
</div>
// This code is located on ListBoxItemsModal.cshtml
#model List<ValueText>
#using (Html.BeginForm("", "", FormMethod.Post, new { #id = "formPostListBoxItems" }))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class=" form-group">
#Html.Label("New Item text")
<div class="input-group">
#Html.TextBox("name", null, new { #id = "txtNewListBoxItem" })
<span class="input-group-btn">
<button id="btnAddListBoxItem" type="button" class="btn btn-default btn-xs">Add Item</button>
</span>
</div>
</div>
#Html.DevExpress().ListBox(settings =>
{
settings.Name = "ListBoxCarMake";
settings.Properties.EnableClientSideAPI = true;
settings.Properties.ValueField = "Value";
settings.Properties.ValueType = typeof(string);
settings.Properties.TextField = "Text";
}).BindList(Model).GetHtml()
}
// Add a new item to list box
$(document).on("click", "#btnAddListBoxItem", function () { s = $("#txtNewListBoxItem").val(); ListBoxCarMake.AddItem(s); });
$(document).on("click", "#btnPostListBoxItems", function (e) {
e.preventDefault();
err = '';
$.ajax({
url: '#Url.Action(("PostListBoxItems", "System")',
cache: false,
type: "POST",
data: $("#formPostListBoxItems").serialize(),
success: function (data) { $("#modalMainData").html(data); },
error: function (xhr, status, exception) { DisplayAjaxError(xhr, status, exception); }
});
});
// CONTROLLER
public ActionResult GetListOptions()
{
var model = new List<ValueText>();
model.Add(new ValueText() { Text = "AUDI", Value = "AUDI" });
model.Add(new ValueText() { Text = "BMW", Value = "BMW" });
model.Add(new ValueText() { Text = "VW", Value = "VW" });
return PartialView("~/Views/System/ListBoxItemsModal.cshtml", model);
}
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult PostListBoxItems(List<ValueText> list)
{
return PartialView("~/Views/System/ListBoxItemsModal.cshtml", list);
}
#for (int i = 0; i < Model.Count; i++)
{
#Html.HiddenFor(modelitem => Model[i].Text)
#Html.HiddenFor(modelitem => Model[i].Value)
}
I suggest you to create a ListContainer and append its elements to your html as hidden inputs. This way, when the submit button is pressed, the values will go to the controller.
I am creating an application on MVC Mobile and having a problem. Here i have a Partial view load on a page run-time by ajax. In which i have a simple form which will submit with ajax request like bellow:
#model Test.Models.TestModel
#using (this.Ajax.BeginForm("Create", "Test", Model, new AjaxOptions { UpdateTargetId = "divResult", LoadingElementId = "loading", LoadingElementDuration = 2000, HttpMethod = "Post" }, new { id = "frmCreate" }))
{
#Html.AntiForgeryToken()
<div class="messageBox">#Html.Raw(TempData["Message"])</div>
<div class="atmForm">
<div class="control-group">
#Html.LabelFor(x => x.Name)
#Html.TextBoxFor(x => x.Name, new { #placeholder = "Name", #class = "inputStyle" }) #Html.ValidationMessageFor(x => x.Name)
</div>
<div class="control-group">
#Html.LabelFor(x => x.Notes)
#Html.TextAreaFor(x => x.Notes, new { #placeholder = "Notes", #class = "inputStyle" }) #Html.ValidationMessageFor(x => x.Notes)
</div>
</div>
<div class="form-actions2 clearfix">
<input type="submit" class="btn btn-block" value="Create" data-ajax="false" id="btnFormSubmit" />
</div>
}
<script type="text/javascript">
$.validator.unobtrusive.parse("#frmCreate");
</script>
The problem is when user submit the form the controller called twice. First time it return the partial view and then again it calls and then jQuery Mobile change the page. I am Using MVC4 with jQuery Mobile 1.1.0
(please note that create.cshtml (desktop ver) works fine but create.Mobile.cshtml (mobility ver) havng this problem)
Do not submit the form, use $("#myForm").serialize() as ajax data.
I've got these two cascading dropdown lists, they populate just fine. But when I hit submit I always gett NULL as the value of the second. My guess is that I have to do something with the javascript, but my skills in that department are seriously lacking. Please help!
Code removed, whole view added instead
I dont even have an HtmlHelper for the second dropdown, it just looks like this in the view:
Code removed, whole view added instead
Works just fine, I mean, it populates fine depending on what's chosen in the first dropdown. Maybe this is the part that needs alteration? The thing is I'm clueless.
EDIT:
This is the code that reads the information from the form and submits it to the database.
[HttpPost]
public ActionResult Returer(ReturerDB retur)
{
if (ModelState.IsValid)
{
db2.ReturerDB.AddObject(retur);
db2.SaveChanges();
return RedirectToAction("Returer");
}
return View("Returer");
}
EDIT2
The whole view code:
#model Fakturabolag.Models.ReturerDB
#{
ViewBag.Title = "Returer";
}
<script type="text/javascript" src="../../Scripts/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#bolag").prop("disabled", true);
$("#Kund").change(function () {
if ($("#Kund").val() != "- Välj bolag -") {
var options = {};
options.url = "/companies/getbolag";
options.type = "POST";
options.data = JSON.stringify({ country: $("#Kund").val() });
options.dataType = "json";
options.contentType = "application/json";
options.success = function (bolag) {
$("#bolag").empty();
for (var i = 0; i < bolag.length; i++) {
$("#bolag").append("<option>" + bolag[i] + "</option>");
}
$("#bolag").prop("disabled", false);
};
options.error = function () { alert("Fel vid bolagshämtning!"); };
$.ajax(options);
}
else {
$("#bolag").empty();
$("#bolag").prop("disabled", true);
}
});
});
</script>
<h2>Returer</h2>
#using (Html.BeginForm())
{
#Html.ValidationSummary(true)
<fieldset>
<legend>Returer</legend>
<br /><br />
<div class="editor-label">
<b>Kund</b>
</div>
<div class="editor-field">
#Html.DropDownListFor(model => model.Kund, ViewData["kundLista"] as SelectList)
#Html.ValidationMessageFor(model => model.Kund)
</div>
<div class="editor-label">
<b>Bolag</b>
</div>
<select id="bolag"></select>
<div class="editor-label">
<b>Pris</b>
</div>
<div class="editor-field">
#Html.TextBox("pris", null, new { style = "width: 150px" })
#Html.ValidationMessageFor(model => model.Pris)
</div>
<div class="editor-label">
<b>Datum</b>
</div>
<div class="editor-field">
#Html.TextBox("datum", ViewData["datum"] as String, new { style = "width: 150px" })
#Html.ValidationMessageFor(model => model.Datum)
</div>
<p>
<input type="submit" value="Lägg till" />
</p>
</fieldset>
}
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
Currently you are not retrieving the additional value "bolag" in your action. I guess your model does not have property named "bolag". You can either add that or you can add additional parameter to you action like so:
[HttpPost]
public ActionResult Returer(ReturerDB retur, string bolag)
{
if (ModelState.IsValid)
{
db2.ReturerDB.AddObject(retur);
db2.SaveChanges();
return RedirectToAction("Returer");
}
return View("Returer");
}
After that, the selected value from the dropdown should automatically be in the bolag-parameter.
Edit.
You also need to add name-attribute to your select:
<select id="bolag" name="bolag"/>