I am creating an MVC module for DNN and trying to return a form as a partial view to allow entry of a dynamic number of objects from the user, however when I make an AJAX call to my action route which returns the PartialView and append it to the page, I'm receiving the HTML for an entire page wrapped in my DNN skin's layout.
I followed the example for rendering partial views from DNN's official samples repo and this general MVC guide. I've made sure to return a PartialView from my ActionResult and set the Layout to null in my partial view Razor template.
My Action:
public PartialViewResult BlankEducationForm()
{
return PartialView(new Education());
}
My partial view:
#inherits DotNetNuke.Web.Mvc.Framework.DnnWebViewPage<Chris.Modules.ResumeTest2.Models.Education>
#{
Layout = null;
}
#using System.Text.RegularExpressions
#using DotNetNuke.Web.Mvc.Helpers
<div class="education-editor">
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">School Name:</label>
#Html.TextBoxFor(m => m.SchoolName, new { #class = "form-control", #placeholder = "Degree" })
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Degree(s) Earned:</label>
#Html.TextBoxFor(m => m.Degree, new { #class = "form-control", #placeholder = "Degree" })
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label for="inputEmail4">Start Year:</label>
#Html.TextBoxFor(m => m.StartYear, new { #class = "form-control", #placeholder = "Start Year" })
</div>
<div class="form-group col-md-4">
<label for="inputPassword4">End Year:</label>
#Html.TextBoxFor(m => m.EndYear, new { #class = "form-control", #placeholder = "End Year" })
</div>
<div class="form-group col-md-4">
<label for="inputPassword4">Display Order:</label>
#Html.TextBoxFor(m => m.Order, new { #class = "form-control", #placeholder = "Order" })
</div>
</div>
</div>
The parent view that's calling it with the AJAX call:
#inherits DotNetNuke.Web.Mvc.Framework.DnnWebViewPage<Chris.Modules.ResumeTest2.Models.Resume>
#using System.Text.RegularExpressions
#using DotNetNuke.Web.Mvc.Helpers
<div id="Items-#Dnn.ModuleContext.ModuleId">
<div id="resume-container">
<form method="post" action="#Url.Action("Create", "Resume")">
<h1>General Information</h1>
<div class="form-group">
<label for="exampleInputPassword1">Resumé Name:</label>
#Html.TextBoxFor(m => m.ResumeName, new { #class = "form-control", #placeholder = "Resume Name" })
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label for="inputEmail4">First Name:</label>
#Html.TextBoxFor(m => m.FirstName, new { #class = "form-control", #placeholder = "First Name" })
</div>
<div class="form-group col-md-4">
<label for="inputPassword4">Last Name:</label>
#Html.TextBoxFor(m => m.LastName, new { #class = "form-control", #placeholder = "Last Name" })
</div>
<div class="form-group col-md-4">
<label for="inputPassword4">Middle Name:</label>
#Html.TextBoxFor(m => m.MiddleName, new { #class = "form-control", #placeholder = "Middle Name" })
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Address 1</label>
#Html.TextBoxFor(m => m.Address1, new { #class = "form-control", #placeholder = "Address 1" })
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Address 2</label>
#Html.TextBoxFor(m => m.Address2, new { #class = "form-control", #placeholder = "Address 2" })
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label for="inputEmail4">City:</label>
#Html.TextBoxFor(m => m.City, new { #class = "form-control", #placeholder = "City" })
</div>
<div class="form-group col-md-4">
<label for="inputPassword4">State:</label>
#Html.TextBoxFor(m => m.State, new { #class = "form-control", #placeholder = "State" })
</div>
<div class="form-group col-md-4">
<label for="inputPassword4">ZIP:</label>
#Html.TextBoxFor(m => m.Zip, new { #class = "form-control", #placeholder = "ZIP" })
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Phone Number:</label>
#Html.TextBoxFor(m => m.Phone, new { #class = "form-control", #placeholder = "Phone" })
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">E-Mail:</label>
#Html.TextBoxFor(m => m.Email, new { #class = "form-control", #placeholder = "E-mail" })
</div>
</div>
<h1>Education</h1>
<div id="education-forms"></div>
#Html.ActionLink("Add another...", "BlankEducationForm", "Resume", null, new { id = "addItem" })
#Html.HiddenFor(m => m.ResumeId)
<button type="submit" class="dnnPrimaryAction">Create</button>
</form>
</div>
<script>
$('#addItem').click(function () {
$.ajax({
url: this.href,
cache: false,
success: function (html) {
$('#education-forms').append(html);
}
});
return false;
});
</script>
</div>
It does insert the HTML from the request, which includes the form, but for some reason it thinks I want the whole page. I'm not sure if there's some kind of issue with DNN recognizing my controllers, but I have no reason to expect one. I'm really stumped.
In the success function of your ajax call, instead of using:
success: function (html) {
$('#education-forms').append(html);
}
Try the following instead:
success: function (html) {
$('#education-forms').html(html);
}
/// Update to follow up comment
What is the .cshtml of your partial view? For example, if it's called _MyPartialView.cshtml try one of the following (Can't remember off the top of my head if .cshtml is needed or not):
public PartialViewResult BlankEducationForm()
{
return PartialView("_MyPartialView", new Education());
return PartialView("_MyPartialView.cshtml", new Education());
}
You need to setup your RouteConfig.cs like this
public class RouteConfig : IMvcRouteMapper {
public void RegisterRoutes(DotNetNuke.Web.Mvc.Routing.IMapRoute mapRouteManager) {
mapRouteManager.MapRoute("ModuleNameHere", "ControllerNameHere", "{controller}/{action}", new[]
{"ControllerNamespaceHere.Controllers"});
}
}
Then you need to use the url like this in your ajax call
'/DesktopModules/MVC/ModuleName/ControllerName/ActionName';
This prevents dnn from injecting the headers and everything else.
Related
In my Application, In EDIT view I want to call data from the database and fill into the partial view that have sent through to the database when creates the request using same partial view . Currently my code I have written like below. But what happens is, If there is 4 records, It will generate 4 line, but there is no data there. All comes as empty.
<ul id="RequItms" style="list-style-type: none">
#if (Model != null && Model.GeneralItmsList != null)
{
foreach (var item in Model.GeneralItmsList)
{
Html.RenderAction("GeneralItmsPartialView", "AppRequests", Model.GeneralItmsList.ToList());
}
}
</ul>
Here is the view. This is the view I'm currently getting from the above code.
But this is the way it should load in that empty fields.
I have checked in the Model.GeneralItemsList There is shows the data, But I think when parsing it to the partial view must be the error occurs.
Here is the partial view code looks like.
#model Asp_PASMVC.Models.GeneralItms
#using Asp_PASMVC.Infrastructure
<li style="padding-bottom:15px">
#using (Html.BeginCollectionItem("GeneralItmsList"))
{
#Html.HiddenFor(model => model.TempID)
<div class="form-horizontal" id="quickForm" novalidate="novalidate">
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="row">
<div class="col-md-5 col-sm-6">
<div class="form-group">
Select Item Description
<div class="col-md-10">
#Html.EditorFor(model => model.Attachment_Description, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Attachment_Description, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="form-group">
Attachment Amount
<div class="col-md-10">
<div class="input-group-prepend">
<span class="input-group-text">Rs.</span>
#Html.EditorFor(model => model.Attachment_Amount, new { htmlAttributes = new { #class = "form-control" } })
</div>
#Html.ValidationMessageFor(model => model.Attachment_Amount, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="form-group">
Attachment
<div class="col-md-10">
<input type="file" name="ImageData#(Model.TempID.ToString())" id="ImageData#(Model.TempID.ToString())" multiple="multiple" data-id="Img#(Model.TempID.ToString())" onchange="checkImage(this)" />
#Html.ValidationMessageFor(model => model.Attachment, "", new { #class = "text-danger" })
</div>
</div>
<img id="Img#(Model.TempID.ToString())" src="" alt="" width="100" height="100" class="ml-1" />
</div>
<button type="button" class="btn btn-danger" onclick="$(this).parent().remove();">Remove</button>
</div>
</div>
}
</li>
I hope that I have explained this question properly. Thanks for the support.
I have a Form that creates an entry into my database. I am trying to add an additional form via a modal that will allow the user to populate the first form by searching a property on the webservice.
What I need is for when the user types hits search in the modal it will call an action on controller that then runs my web service client that then returns a list of appropriate information. I then want this list displayed as a table on the page. The user can then select which search result they want to use to which will then populate the original form. I think I can figure most of this out but wasnt sure of the best way to kick off the search from the modal. Code is as follows.
View
#model *******
#{
ViewBag.Title = "Create";
}
<h2>Create</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#Search">Populate From Service</button>
<!-- Modal -->
<div id="Search" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Search By Property</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<p>blah blah blah</p>
<div class="form-group">
<label for="API14" class="control-label col-md-2">API</label>
<div class ="col-md-10">
<input type="text" class="form-control" id="API14" aria-describedby="API14" placeholder="Enter API">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Search" class="btn btn-success" />
<input type="button" value="Close" data-dismiss="modal" class="btn btn-danger" />
</div>
</div>
</div>
</div>
</div>
</div>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.API14, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.API14, new { htmlAttributes = new { #class = "form-control"} })
#Html.ValidationMessageFor(model => model.API14, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.PROP_NO, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.PROP_NO, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.PROP_NO, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.PROP_NM, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.PROP_NM, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.PROP_NM, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.ENTITY, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10 ">
#Html.EditorFor(model => model.ENTITY, new { htmlAttributes = new { #class = "form-control" } } )
#Html.ValidationMessageFor(model => model.ENTITY, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.PROD_ZONE_NM, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.PROD_ZONE_NM, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.PROD_ZONE_NM, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.LEASE_NAME, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.LEASE_NAME, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.LEASE_NAME, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.WELL_NO, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.WELL_NO, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.WELL_NO, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-success" />
</div>
</div>
</div>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
You could divide your issue into two steps.
Step 1: "What I need is for when the user types hits search in the modal it will call an action on controller that then runs my web service client that then returns a list of appropriate information. I then want this list displayed as a table on the page."
Add the following to your scripts section:
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
<script>
$(document).ready(function () {
$('#submitModal').click(function () {
var data = {
API14: $('#API14').val()
}
$.ajax({
url: '/Default/SearchByProperty',
data: data
}).success(function (html) {
$('#API14List').html(html);
$('#Search').modal('toggle');
});
});
});
</script>
}
This is a simple ajax call that takes the value from you modal input and submits to the server. Note the "url" parameter passed in the call as this will need to match your "/{controller}/{action}". Important: You will also need to update your "Search" button#API14 to type "button", not "submit", as this will avoid a postback which is undesired when making AJAX calls.
You can then add something like this to your controller:
public ActionResult SearchByProperty()
{
var model = new List<string>();
model.Add("one");
model.Add("two");
model.Add("three");
return PartialView(model);
}
... which will require the following in a partial view file I named SearchByProperty.cshtml:
#model List<string>
<table>
#foreach (var item in Model) {
<tr class="API14-item">
<td>#item</td>
</tr>
}
</table>
Step 2: "The user can then select which search result they want to use to which will then populate the original form. I think I can figure most of this out but wasnt sure of the best way to kick off the search from the modal. Code is as follows."
If you are confident in writing jQuery, then you should be able to write some js in the scripts section of your create page that will take the values you place in your table and populate your form:
$(document).on('click', '.API14-item', function () {
//
// TODO: your code here
//
});
Hope this helps!
I have the following view:
#model GRCWebApp.ViewModels.NewClubInterestsViewModel
#{
ViewBag.Title = "Add Club Interests";
}
<div class="col-md-10 col-offset-md-1">
<h2 class ="text-success">Add Club Interests for #Html.DisplayFor(model => model.Name)</h2>
</div>
#using (Html.BeginForm("NewInterests", "Club", FormMethod.Post))
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<hr />
<div class="row">
<div class="col-md-8">
<div class="well bs-component">
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
#Html.HiddenFor(x => Model.ClubId)
<div class="form-group">
<div class="col-md-10 col-md-offset-1">
<h3>Tick the areas your club is interested/runs events in</h3>
</div>
</div>
<div class="col-md-offset-1">
#for (int i = 0; i < Model.ClubTypeInterests.Count(); i++)
{
<div>
#Html.HiddenFor(x => Model.ClubTypeInterests[i].InterestId)
#Html.CheckBoxFor(x => Model.ClubTypeInterests[i].selected)
#Html.LabelFor(x => Model.ClubTypeInterests[i].InterestName, Model.ClubTypeInterests[i].InterestName)
</div>
}
</div>
<div class="form-group">
<div class="row">
<div class="col-md-offset-1 col-md-12">
<input type="submit" name="Submit" value="Next" class="btn btn-success btn-lg" /> to setup Online membership
<input type="submit" name="Submit" value="Complete" class="btn btn-warning btn-sm" /> to just provide online event entries
</div>
</div>
</div>
</div>
</div>
</div>
</div>
}
#using (Html.BeginForm("AddInterest", "Club"))
{
#Html.AntiForgeryToken()
<hr />
<div class="row">
<div class="col-md-8">
<div class="well bs-component">
<div class="form-group">
<div class="col-md-12 col-md-offset-1">
<h3>Not listed? - Add extras here</h3>
</div>
</div>
#Html.HiddenFor(model => model.ClubTypeId)
#Html.HiddenFor(model => model.ClubId)
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-inline">
<div class="form-group">
<div class="row col-md-offset-1 col-md-11">
<div class="col-md-4">
#Html.LabelFor(model => model.InterestName, htmlAttributes: new { #class = "control-label" })
#Html.EditorFor(model => model.InterestName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.InterestName, "", new { #class = "text-danger" })
</div>
<div class="col-md-5">
#Html.LabelFor(model => model.Description, htmlAttributes: new { #class = "control-label" })
#Html.EditorFor(model => model.Description, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Description, "", new { #class = "text-danger" })
</div>
<input type="submit" value="Add" class="btn btn-info" style="margin-top: 22px" />
</div>
</div>
</div>
</div>
</div>
</div>
}
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
Overtime the page loads the Validation message shows for InterestName in the second form AddInterest.
The Get method for the whole form is:
[HttpGet]
public ActionResult NewInterests(NewClubInterestsViewModel model, int id)
{
//Find the Club and then pass its id to the ViewModel
var club = db.Clubs.Find(id);
//model.ClubId = club.ClubId ;
//Interests List
IEnumerable<Interest> allExistingInterests;
//Generate a list of the interests that apply to that type of club
using (ApplicationDbContext context = new ApplicationDbContext())
{
allExistingInterests = context.Interests
.Where(s => s.ClubTypeId == club.ClubTypeId)
.OrderBy(s => s.InterestName)
.ToList();
}
IEnumerable<int> clubInterestIds = club.ClubInterests.Select(x => x.InterestId).ToList();
//Generate the ViewModel with the appropriate Interests
var viewModel = new NewClubInterestsViewModel
{
ClubId = club.ClubId,
Name = club.Name,
ClubTypeId = club.ClubTypeId,
ClubTypeInterests =
allExistingInterests.Select(
x => new ClubInterestsViewModel { InterestId = x.InterestId, InterestName = x.InterestName, selected = clubInterestIds.Contains(x.InterestId) }).ToArray()
};
return View(viewModel);
}
What do I need to do to stop the validation message showing on load?
Remove the NewClubInterestsViewModel model parameter from your GET method. It should be just
public ActionResult NewInterests(int id)
The first step in the model binding process is that instances of your parameters are initialized and then its properties are set based on form values, route values, query string values etc. In your case there are no values to set, so the properties of your model are their defaults, but because you have validation attributes on your properties, validation fails and errors are added to ModelState which are then displayed in the view.
I want to submit a single text field in a form. I have this view:
#model SenecaFormsServer.Areas.Dashboard.Models.EditProductModel
#using SenecaFormsServer.Areas.Dashboard.Models
#using Seneca.SfsLib.Connectors
<div id="ConnectorSettings-MAIL_PRODUCT_HANDLERS">
<h4>#Resources.Entity.Product.SettingsForConnector: Mail product handlers</h4>
#{
MailProductHandlersModel mailModel = Model.ConnectorModels["MAIL_PRODUCT_HANDLERS"] as MailProductHandlersModel;
}
<div class="form-group">
#Html.Label(Resources.Entity.Product.Sender, new { #class = "text-bold control-label col-md-2" })
<div class="col-lg-6 col-md-8 col-sm-10 ">
#Html.Editor("MailProductHandlers_sender", new { htmlAttributes = new { #class = "form-control", #Value = mailModel.Sender, #placeholder = Model.CustomerConfig.DefaultSenderAddress } })
</div>
</div>
<div class="form-group">
#Html.Label(Resources.Entity.Product.MailSubject, new { #class = "text-bold control-label col-md-2" })
<div class="col-lg-6 col-md-8 col-sm-10 ">
#Html.Editor("MailProductHandlers_subject", new { htmlAttributes = new { #class = "form-control", #Value = mailModel.Subject } })
</div>
</div>
<!--
<div class="form-group">
#Html.Label("Reply to form submitter", new { #class = "text-bold control-label col-md-2" })
<div class="col-lg-6 col-md-8 col-sm-10 ">
#Html.CheckBox("MailProductHandlers_replytoFormSubmitter", new { htmlAttributes = new { #class = "form-control" } })
</div>
</div>
-->
<div class="form-group">
#Html.Label(Resources.Entity.Product.MailMessage, new { #class = "text-bold control-label col-md-2" })
<div class="col-lg-6 col-md-8 col-sm-10 ">
#Html.EditorFor(model => mailModel.Message, new { htmlAttributes = new { #class = "form-control tiny-mce", data_lang = System.Globalization.CultureInfo.CurrentUICulture.Name } })
#Html.ValidationMessageFor(model => mailModel.Message)
#*#Html.TextArea("MailProductHandlers_message", mailModel.Message, new { #class = "form-control", #rows = 15 })*#
</div>
</div>
<div class="form-group">
#Html.Label(Resources.Entity.Product.GeneratePDF, new { #class = "text-bold control-label col-md-2" })
<div class="col-lg-6 col-md-8 col-sm-10 ">
#Html.Label(Resources.Entity.Product.GeneratePDFYes) #Html.RadioButtonFor(model => model.IsChecked, true, new { #checked = "checked", #class = "pdfchecker" })
#Html.Label(Resources.Entity.Product.GeneratePDFNo) #Html.RadioButtonFor(model => model.IsChecked, false, new { #class = "pdfchecker" })
</div>
</div>
<div class="form-group">
<div id="hideLable">
#Html.Label(Resources.Entity.Product.PdfMessage, new { #class = "text-bold control-label col-md-2" })
</div>
<div class="col-lg-6 col-md-8 col-sm-10 ">
#Html.EditorFor(model => mailModel.PdfMessage, new { htmlAttributes = new { #class = "form-control tiny-mce", #id = "mceu_61", data_lang = System.Globalization.CultureInfo.CurrentUICulture.Name } })
#Html.ValidationMessageFor(model => mailModel.PdfMessage)
</div>
</div>
#using (Html.BeginForm("GeneratePDFFromHtml", "Product", FormMethod.Post)) {
#Html.AntiForgeryToken()
<div class="col-xs-12 padding-bottom-10">
#*<i class="fa fa-fw fa-check"></i> #Resources.Action.Navigation.GeneratePDF *#
<button type="submit" value="Save" class="btn btn-success"><i class="fa fa-fw fa-check"></i> #Resources.Action.Navigation.GeneratePDF</button>
</div>
}
And I want to submit this part:
#using (Html.BeginForm("GeneratePDFFromHtml", "Product", FormMethod.Post)) {
#Html.AntiForgeryToken()
<div class="col-xs-12 padding-bottom-10">
#*<i class="fa fa-fw fa-check"></i> #Resources.Action.Navigation.GeneratePDF *#
<button type="submit" value="Save" class="btn btn-success"><i class="fa fa-fw fa-check"></i> #Resources.Action.Navigation.GeneratePDF</button>
</div>
}
and this is the action method:
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult GeneratePDFFromHtml(EditProductModel model, string data, string designId)
{
string customerSchema = SfsHelpers.StateHelper.GetSchema();
//TemplateLibraryEntry entry = GetTemplateLibraryEntry(designId, customerSchema);
SubmittedForm sf = new SubmittedForm();
string schema = requestSchema;
customer_DbConnection db = new customer_DbConnection();
RenderFormController renderController = new RenderFormController();
renderController.GeneratePdf(data, db,sf);
//return RedirectToAction(model.DesignId, "Prdocut/Edit");
return Content("It works");
}
</div>
but the action method is not been triggered.
How to trigger the action method?
There has be created a PDF file from this textfield:
#using (Html.BeginForm("GeneratePDFFromHtml", "Product", null, FormMethod.Post, new { enctype = "multipart/form-data" })) {
#Html.AntiForgeryToken()
<div class="form-group">
<div id="hideLable">
#Html.Label(Resources.Entity.Product.PdfMessage, new { #class = "text-bold control-label col-md-2" })
</div>
<div class="col-lg-6 col-md-8 col-sm-10 ">
#Html.EditorFor(model => mailModel.PdfMessage, new { htmlAttributes = new { #class = "form-control tiny-mce", #id = "mceu_61", data_lang = System.Globalization.CultureInfo.CurrentUICulture.Name } })
#Html.ValidationMessageFor(model => mailModel.PdfMessage)
</div>
</div>
<div class="col-xs-12 padding-bottom-10">
<i class="fa fa-fw fa-check"></i> #Resources.Action.Navigation.GeneratePDF
#*<button type="submit" value="Save" class="btn btn-success"><i class="fa fa-fw fa-check"></i> #Resources.Action.Navigation.GeneratePDF</button>*#
</div>
}
and this is also the action method that has to been triggered and create the PDF file. But the method is not been triggered in the controller
The problem is that it is a partial view. So I solved like this:
Jquery:
$(document).ready(function () {
$('#btnGeneratePDF').click(function () {
var form = document.createElement("form");
form.setAttribute("GeneratePDFFromHtml", "post");
form.setAttribute("action", "GeneratePDFFromHtml");
form.setAttribute("target", "_blank");
var hiddenField = document.createElement("btnGeneratePDF");
//hiddenField.setAttribute("name", "search");
//hiddenField.setAttribute("value", "product1,product2");
hiddenField.setAttribute("type", "hidden");
form.appendChild(hiddenField);
document.body.appendChild(form);
form.submit();
});
});
and the view looks like now this:
<form method="post" id="form" name="form" action="#Url.Action("GeneratePDFFromHtml", "Product")" enctype="multipart/form-data">
<fieldset>
<div class="form-group">
<div id="hideLable">
#Html.Label(Resources.Entity.Product.PdfMessage, new { #class = "text-bold control-label col-md-2" })
</div>
<div class="col-lg-6 col-md-8 col-sm-10 ">
#Html.EditorFor(model => mailModel.PdfMessage, new { htmlAttributes = new { #class = "form-control tiny-mce", #id = "mceu_61", data_lang = System.Globalization.CultureInfo.CurrentUICulture.Name } })
#Html.ValidationMessageFor(model => mailModel.PdfMessage)
</div>
</div>
<div class="col-xs-12 padding-bottom-10">
#*<i class="fa fa-fw fa-check"></i> #Resources.Action.Navigation.GeneratePDF *#
<button type="submit" value="Create" class="btn btn-success" id="btnGeneratePDF" name="btnGeneratePDF" formtarget="_blank" onclick="GeneratePDFFromHtml()"><i class="fa fa-fw fa-check"></i> #Resources.Action.Navigation.GeneratePDF</button>
</div>
</fieldset>
</form>
but the url is now like this, after I press on the button:
http://localhost:51098/Dashboard/Product/Edit/GeneratePDFFromHtml?
what is ofcourse not correct. so how to trigger the method in the controller?
I get also this warning: Uncaught ReferenceError: GeneratePDFFromHtml is not defined
I have a form that uses partialviews to load the different sections. When the information is filled out I would like it to show up on a final partialview to give a confirmation page before submission. How do I grab the information entered on one partialview and display it for submit on the final?
My partialview code looks like this:
#using (Ajax.BeginForm("PrimaryApplicant", new AjaxOptions { HttpMethod = "POST", InsertionMode = InsertionMode.Replace, UpdateTargetId = "step3", OnSuccess = "showStep3" }))
{
<h4>Primary Applicant Information</h4>
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
<hr/>
<div class="form-group">
#Html.LabelFor(m => m.FirstName, new { #class = "col-md-3 control-label" })
<div class="col-md-9">
<div class="col-md-4">
#Html.TextBoxFor(m => m.FirstName, new { #class = "form-control", placeholder = "First Name" })
</div>
<div class="col-md-4">
#Html.TextBoxFor(m => m.MiddleName, new { #class = "form-control", placeholder = "Middle Name" })
</div>
<div class="col-md-4">
#Html.TextBoxFor(m => m.LastName, new { #class = "form-control", placeholder = "Last Name" })
</div>
#Html.ValidationMessageFor(m => m.FirstName)
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.SSN, new { #class = "col-md-3 control-label" })
<div class="col-md-9">
<div class="col-md-4">
#Html.TextBoxFor(m => m.SSN, new { #class = "form-control", placeholder = "Social Security Number" })
#Html.ValidationMessageFor(m => m.SSN)
</div>
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.DOB, new { #class = "col-md-3 control-label" })
<div class="col-md-9">
<div class="col-md-4">
#Html.TextBoxFor(m => m.DOB, new { #class = "form-control", type = "date", placeholder = "Date of Birth" })
#Html.ValidationMessageFor(m => m.DOB)
</div>
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.Email, new { #class = "col-md-3 control-label" })
<div class="col-md-9">
<div class="col-md-4">
#Html.TextBoxFor(m => m.Email, new { #class = "form-control", type = "email", placeholder="Email Address" })
</div>
#Html.ValidationMessageFor(m => m.Email)
</div>
</div>
I'm using models to create the input fields and all of its variables. After a user fills out the inputs on one partial view and hits continue it opens the next partialview. Once the form is filled out how would I display a final confirmation page echoing the values they input?
Have a view model per view.
When the next button is clicked submit the form to the current pages' action method.
Store the form data/view model in the user's current session for retrieving later, then display the next view.
repeat step 1 and 2 if necessary.
Retrieve all the data from the session and combine them to your final viewmodel then display your final confirmation page.