Somewhat new to web apps here, and struggling to get this to work. Would appreciate any input.
Essentially, I have a main (Create) view with a dropdown and a partial view. Based on the selected value, the partial view needs to change, i.e. I want to render different .cshtml's. I've gone through many other similar sounding questions and tried various combinations without success.
The most promising one I found was this: https://www.c-sharpcorner.com/UploadFile/ansh06031982/passing-data-using-viewdata-viewbag-tempdata-session-vari/ but it still doesn't get me what I need. Nothing changes on my View, i.e the partial view does not render even though the debug shows the right values being passed.
Model:
public class myModelType
{
[Key]
public int ID { get; set; }
[Required]
public string modelType { get; set; }
public string Input1
public string Input2
}
Controller
public class myModelTypeController : Controller
{
public ActionResult Create()
{
myModelType myModel = new myModelType();
return View(myModel);
}
}
public ActionResult myModelTypeChange(FormCollection form)
{
String typeSelected = form[“modelTypeDDL”];
TempData[“modelTypeSelected”] = typeSelected;
Return RedirectToAction(“myPartialView”);
}
public ActionResult myPartialView()
{
myModelType myModel = new myModelType();
string typeSelected = TempData[“modelTypeSelected”];
string partialViewForm = “”;
If (typeSelected == “type 1”)
partialViewForm = “form1”;
else
partialViewForm = “form 2”
return PartialView(partialViewForm, myModel);
}
Main (Create) View
#model myModelType
<script src = “#Url.Content(“~/Scripts/jquery-3.4.1.min.js”)”></script>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
//bunch of html controls
#Html.DropDownList(“Model Type”, Enumerable.Empty<SelectListItem>,”- - - “, new { #class = “form-control”, id = “modelTypeDDL})
//Need to load partial view here
<div class = “container” id= “partialViewPlaceHolder”>
</div>
}
#section Scripts {
#Scripts.Rended(“~/bundles/jqueryval”)
}
Partial view 1 (form1.cshtml)
#model myModelType
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
//html specific to form1
#Html.EditorFor(“model=>model.Input1”, new { #class = “form-control”})
}
Partial view 2 (form2.chstml)
#model myModelType
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
//html specific to form2
#Html.EditorFor(“model=>model.Input2”, new { #class = “form-control”})
}
jquery script
<script language =”JavaScript” type=”text/javascript”>
$(document).ready(function() {
$(“#modelType”).change(function() {
$.post(“/myModelTypeController/myModelTypeChange”, {modelType: $(this).val(), function(data){
$(“partialViewPlaceHolder”).load(data);
});
});
});
</script>
The partial view files form1 and form2 are in the same folder as the main Create view.
Would appreciate any help in getting this to work, or any other suggestions on how to get a partial view to switch files based on DDL input. Thanks!
Related
I have an application done in ASP.NET MVC and I am having an issue where my partial view is not being rendered after my form is submitted. What it does is that it reloads the entire page.
Here is my Model:
using System.Collections.Generic;
namespace Portfolio.Models
{
public class HomeViewModel
{
public List<User> User = new List<User>();
}
}
Here is my View:
#{
ViewBag.Title = "Home Page";
}
#model Portfolio.Models.HomeViewModel
#using (Ajax.BeginForm("FooForm",
new AjaxOptions
{
HttpMethod = "get",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "FooView"
}))
{
<button type:"submit" value:"Refresh/>
}
#Html.Partial("_FooView", Model)
<script>
window.onload = function () {
window.setTimeout(function () { $("#FooForm").submit(); }, 5000);
};
</script>
Here is my partial view:
#model Portfolio.Models.HomeViewModel
<div id="FooView">
#for (int i = 0; i < Model.User.Count; i++)
{
<form>
<div id="Name">#Model.User[i].Name</div>
<div id="Email">#Model.User[i].Email</div>
<div id="Date">#Model.User[i].Date</div>
</form>
<div>---------------------
</div>
}
</div>
Finally, here is my Controller:
using Portfolio.Models;
using System;
using System.Timers;
using System.Web.Mvc;
namespace Portfolio.Controllers
{
public class HomeController : Controller
{
public HomeViewModel model = new HomeViewModel();
Timer Timer = new Timer();
public ActionResult Index()
{
ModelState.Clear();
model.User.Add(new User() { Name = "A", Email = "a#email.com", Date = DateTime.Now.AddHours(-1) });
model.User.Add(new User() { Name = "B", Email = "b#email.com", Date = DateTime.Now.AddHours(-2) });
model.User.Add(new User() { Name = "C", Email = "c#email.com", Date = DateTime.Now.AddHours(-3) });
if (Request.IsAjaxRequest())
{
return PartialView("_FooView", model);
}
return View(model)
}
}
}
Can someone see why my Index Action is return the entire view and not the partial view upon Ajax request? Am I not setting my Ajax form properly? Many thanks in advance.
There are a few issues with your code.
First, your script does not submit your form because your form does not have an id attribute with a value of FooForm. Your Ajax.BeginForm() code does not add an id attribute (and is in fact calling a method in your controller named FooForm(). Assuming you really want to call the Index() method in your script then change the BeginForm code to
#using (Ajax.BeginForm("Index", null, new AjaxOptions(....), new { id = "FooForm" }))
which will generate <form .... id="FooForm" >
Then if your actually not hitting the code in the if (Request.IsAjaxRequest()) that returns the PartialView, it means your making a normal submit which means that you have not included jquery.unobtrusive-ajax.js in the view (or its not loading correctly or is loaded in the wrong order)
There is a missing double-quote on this line after Refresh: <button type:"submit" value:"Refresh/>
#model IEnumerable<Evidencija.Models.Vozilo>
#{
ViewBag.Title = "PokreniIzvjestaj";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>PokreniIzvjestaj</h2>
#using (Html.BeginForm()) {
#Html.ValidationSummary(true)
<fieldset>
<legend>Vozilo</legend>
<p>
#Html.DropDownList("Vozila", Model.Select(p => new SelectListItem { Text = p.VoziloID.ToString(), Value = p.VoziloID.ToString() }), "Izaberi vozilo")
</p>
<input type="submit" value="Dodaj stavku" />
</fieldset>
}
I want to send id of table vozilo to controler with dropdownlist.
Controler accepts vozilo as a parameter but it is ollways zero.
How can I solve this without using viewmodel.
[HttpPost]
public ActionResult PokreniIzvjestaj(Vozilo v)
{
ReportClass rpt = new ReportClass();
rpt.FileName = Server.MapPath("~/Reports/Vozilo.rpt");
rpt.Load();
//ReportMethods.SetDBLogonForReport(rpt);
//ReportMethods.SetDBLogonForSubreports(rpt);
// rpt.VerifyDatabase();
rpt.SetParameterValue("#VoziloId",v.VoziloID);
Stream stream = null;
stream = rpt.ExportToStream(CrystalDecisions.Shared.ExportFormatType.PortableDocFormat);
return File(stream, "application/pdf", "Vozilo.pdf");
//PortableDocFormat--pdf format
//application/pdf -- vezan za pdf format, ako je drugi tip mjenja se u zavisnosti od izabranog
//naziv.pdf -- naziv dokumenta i izabrana ekstenzija
}
[HttpGet]
public ActionResult PokreniIzvjestaj()
{
var vozila = db.Voziloes.ToList();
return View(vozila);
}
There are two method from controler.
You currently binding your drop down to a property named Vozilo. A <select> post back single value (in your case the VoziloID or the selected option. Your POST method then tries to bind a complex object Vozilo to an int (assuming VoziloID is typeofint) which of course fails and the model isnull`. You could solve this changing the method to
[HttpPost]
public ActionResult PokreniIzvjestaj(int Vozilo)
The parameter Vozilo will now contain the value of the selected VoziloID.
However it not clear why you want to "solve this without using viewmodel" when using a view model is the correct approach
View model
public class VoziloVM
{
[Display(Name = "Vozilo")]
[Required(ErrorMessage = "Please select a Vozilo")]
public int? SelectedVozilo { get; set; }
public SelectList VoziloList { get; set; }
}
Controller
public ActionResult PokreniIzvjestaj()
{
var viziloList = db.Voziloes.Select(v => v.VoziloID);
VoziloVM model = new VoziloVM();
model.VoziloList = new SelectList(viziloList)
model.SelectedVozilo = // set a value here if you want a specific option selected
return View(model);
}
[HttpPost]
public ActionResult PokreniIzvjestaj(VoziloVM model)
{
// model.SelectedVozilo contains the value of the selected option
....
}
View
#model YourAssembly.VoziloVM>
....
#Html.LabelFor(m => m.SelectedVozilo)
#Html.DropDownListFor(m => m.SelectedVozilo, Model.VoziloList, "-Please select-")
#Html.ValidationMessageFor(m => m.SelectedVozilo)
....
I am trying to display a Partial View inside a master (Index) View:
Steps:
User selects a Dropdown item from the Index View.
This displays a Partial View that has a search Form.
User fills the search Form and then clicks the Submit button.
If the search Form is valid, a new page (Results View) is displayed.
Else, the search Form Partial View should be re displayed with errors INSIDE the master View
I'm having a problem with number 4 because when the search Form submits, it only displays the partial View in a new window. I want to display the whole page : Index View + Partial View with errors.
Suggestions? This is what I have:
Image
Controller
public class AppController : Controller
{
public ActionResult Index()
{
return View(new AppModel());
}
public ActionResult Form(string type)
{
if (type == "IOS")
return PartialView("_IOSApp", new AppModel());
else
return PartialView("_AndroidApp", new AppModel());
}
public ActionResult Search(AppModel appModel)
{
if (ModelState.IsValid)
{
return View("Result");
}
else // This is where I need help
{
if (appModel.Platform == "IOS")
return PartialView("_IOSApp", appModel);
else
return PartialView("_AndroidApp", appModel);
}
}
}
Model
public class AppModel
{
public string Platform { get; set; }
[Required]
public string IOSAppName { get; set; }
[Required]
public string AndroidAppName { get; set; }
public List<SelectListItem> Options { get; set; }
public AppModel()
{
Initialize();
}
public void Initialize()
{
Options = new List<SelectListItem>();
Options.Add(new SelectListItem { Text = "IOS", Value = "I" });
Options.Add(new SelectListItem { Text = "Android", Value = "A"});
}
}
Index.cshtml
#{ ViewBag.Title = "App Selection"; }
<h2>App Selection</h2>
#Html.Label("Select Type:")
#Html.DropDownListFor(x => x.Platform, Model.Options)
<div id="AppForm"></div> // This is where the Partial View goes
_IOSApp.cshtml
#using (Html.BeginForm("Search", "App"))
{
#Html.Label("App Name:")
#Html.TextBoxFor(x => x.IOSAppName)
<input id="btnIOS" type="submit" value="Search IOS App" />
}
AppSearch.js
$(document).ready(function () {
$("#Platform").change(function () {
value = $("#Platform :selected").text();
$.ajax({
url: "/App/Form",
data: { "type": value },
success: function (data) {
$("#AppForm").html(data);
}
})
});
});
You need to call the search method by ajax too.
Change the index.html and then
1- if Form is valid replace the whole html or the mainContainer( The div that i have added to view).
2- else just replace the partial view.
#{ ViewBag.Title = "App Selection"; }
<div id="mainContainer">
<h2>App Selection</h2>
#Html.Label("Select Type:")
#Html.DropDownListFor(x => x.Platform, Model.Options)
<div id="AppForm"></div> // This is where the Partial View goes
</div>
Remove the form tag from your partial view just call an ajax call method for searching.
May be easiest way to handle this problem is using MVC unobtrusive ajax.
I would say use inline Ajax to submit this form.
#using (Html.BeginForm("Search", "App"))
{
#Html.Label("App Name:")
#Html.TextBoxFor(x => x.IOSAppName)
<input id="btnIOS" type="submit" value="Search IOS App" />
}
change upper given code into following code
#using (
Ajax.BeginForm(
"Form", "App",
new AjaxOptions()
{
UpdateTargetId = "App",
HttpMethod = "Post"
}
)
)
{
<div class="editor-label">
#Html.Label("App Name:")
</div>
<div class="editor-field">
#Html.TextBoxFor(x => x.IOSAppName)
</div>
<input id="btnIOS" type="submit" value="Search IOS App" />
}
//in controller change the parameter of the given method from string type to model object which will be posted by ajax form.
public ActionResult Form(AppModel appModel)
{
if (appModel.type == "IOS")
return PartialView("_IOSApp", new AppModel());
else
return PartialView("_AndroidApp", new AppModel());
}
I am using ASP.NET MVC 4 with entity framework model first.
In my "Masterpage.cshtml" I want to have a partial view which contains a textbox and a button.
The search is looking for the items title, if the text contains a items title it should display those items.
When a text is submitted the #renderbody() should show a view with the items.
My question is how can I do this in a good way? whats a good and easy approach?
So far I have done this:
Created a method in my repository that does the search function:
public List<News> Search(string query)
{
var queryz = db.News.Where(x => x.Title.Contains(query));
return queryz.ToList();
}
Now when it comes to my Searchcontroller im kinda lost how to do this. Beacuse one actionresult need to be the partialview that has a string query parameter and other one that contains a view that will display the items?
What I have done right now is having the whole process in same actionresult:
Repository rep = new Repository();
[HttpPost]
public ActionResult Search(string query)
{
var searchlist = rep.Search(query);
var model = new ItemViewModel()
{
NewsList = new List<NewsViewModel>()
};
foreach (var NewsItems in searchlist)
{
FillProductToModel(model, NewsItems);
}
return View(model);
}
private void FillProductToModel(ItemViewModel model, News news)
{
var productViewModel = new NewsViewModel
{
Description = news.Description,
NewsId = news.Id,
Title = news.Title,
link = news.Link,
Imageurl = news.Image,
PubDate = news.Date,
};
model.NewsList.Add(productViewModel);
}
any kind of help is appreciated alot!
You could use the following approach:
Index.cshtml
Have one DIV that calls the search controller action, and another that'll display the results.
<div id="search-form">
#Html.Action("Search", "Home"); // GET action in controller that displays form
</div>
<div id="search-results">
</div>
_SearchFormPartial.cshtml
Create a partial view that'll contain the search form. You can use Ajax.BeginForm so when a user searches the results will be displayed in the search-results DIV in Index.cshtml by AJAX. UpdateTargetId specifies that we want to pass the results of the search to the search-results DIV.
#using (Ajax.BeginForm("Search", "Home", FormMethod.Post,
new AjaxOptions
{
InsertionMode = InsertionMode.Replace,
HttpMethod = "POST",
UpdateTargetId = "search-results"
}))
{
<div>
#Html.TextBox("query")
<input type="submit" value="Search" />
</div>
}
Controller
In your controller you'll need one action to display the form (partial view above) and another to process the search query and retun another partial view that'll display the results:
[HttpGet]
public ActionResult Search()
{
return PartialView("_SearchFormPartial");
}
[HttpPost]
public ActionResult Search(string query)
{
if(query != null)
{
try
{
var searchlist = rep.Search(query);
var model = new ItemViewModel()
{
NewsList = new List<NewsViewModel>()
};
return PartialView("_SearchResultsPartial", model);
}
catch (Exception e)
{
// handle exception
}
}
return PartialView("Error");
}
_SearchResultsPartial.cshtml
This partial will display the results. It's strongly typed taking in an ItemViewModel.
#model Namespace.ViewModels.ItemViewModel
#if (Model.SearchResults.Count == 0)
{
<h3 class="text-error">No items matched your search query!</h3>
}
else
{
foreach (var result in Model.NewsList)
{
// display search results
}
}
If your _SearchResultsPartial.cshtml is not inserted into the DOM element of given ID, you should add a script: query.unobtrusive-ajax.js
It fixed the MattSull's solution in my case
I am using a partial view that is displayed in a pop up to edit the details of a record that is clicked on in the main window. On this view, the user can edit, delete or cancel. When the detail record is edited or deleted successfully, I want to close the partial view and update the main window. Right now, on delete, my main view is reloading in my pop up on success.
Any help getting this to work is greatly appreciated.
The HTML:
`#item.StartDate.ToShortDateString()`
Here are the custom javascript functions to popup a window:
function popup(url) {
window.open(url, 'notes', 'width=900,height=600,scrollbars=yes,resizable=yes,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0');
}
function popup(url, windowName) {
window.open(url, windowName, 'width=900,height=600,scrollbars=yes,resizable=yes,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0');
}
You could add a boolean property to the view model that you are using in your partial:
public class MyViewModel
{
public MyViewModel()
{
ShouldReload = false;
}
public bool ShouldReload { get; set; }
// Some properties
public string Foo { get; set; }
}
and then in the partial test its value and refresh the opener and close the popup:
#model MyViewModel
#if (Model.ShouldReload)
{
<script type="text/javascript">
// refresh the parent window
window.opener.location.reload();
// close the popup
window.close();
</script>
}
else
{
using (Html.BeginForm())
{
#Html.LabelFor(x => x.Foo)
#Html.EditorFor(x => x.Foo)
<button type="submit">OK</button>
}
}
Now all that's left are the 2 controller actions that will be used to respectively show the partial and process it:
public ActionResult Dialog()
{
var model = new MyViewModel();
return PartialView(model);
}
[HttpPost]
public ActionResult Dialog(MyViewModel model)
{
if (!ModelState.IsValid)
{
// the model is invalid => redisplay the partial
return PartialView(model);
}
// TODO: at this stage the model is valid
// => pass it to the service layer for processing
// everything went fine => set the ShouldReload flag to true
// so that the view refreshes its opener and closes itself
model.ShouldReload = true;
return PartialView(model);
}