Develop Reference

Rotativa form inline Bootstrap 4

I have a problem with Rotativa and Bootstrap. I want to generate a PDF with an inline form but it doesn't display inline. I've made a basic example. I am returning a PartialViewAsPdf and the html is a simple inline form example with bootstrap 4(w3schools). Any ideas?
.cshtml
<form class="form-inline" action="/action_page.php">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Controller
var actionPdf = new Rotativa.PartialViewAsPdf("File.cshtml", model);
return actionPdf
Expected result:
Actual Result

Rotativa doesn't know about display:flex.Replace this with display:-webkit-box.

Form tags distorting the div alignment in internet explorer

I have two divs in separate form tags. They render correctly in chrome and firefox but unfortunately not in IE. The alignment of the divs get distorted. If it remove the first form tag from the code it solves the alignment issue but I am not able to postback in the link in the second form tag.Hence I need to separate both the divs in two different form tags. Can somebody help
<form>
<div id="FundsNetworkNotAvailable" class="msgError" runat="server">
<%--These date is dynamically pulled from the config file--%>
<h2>Attention</h2>
<p>
FundsNetwork will be carrying out maintenance work on their website over the weekend from
<asp:Label runat="server" ID="FundsNetworkNotAvailableFrom" Text="19/12/2009" />
to
<asp:Label runat="server" ID="FundsNetworkNotAvailableUntil" Text="20/12/2009" />.
During this period, their website will become unavailable.
We apologise for the disruption and any inconvenience caused.
</p>
</div>
<br />
</form>
</form>
<form id="post_info_to_Fidelity" name="post_info_to_Fidelity" method="post" target="_blank" action="https://www.fidelity.co.uk/investor/site/general/jsp/general_set_cookie.jsp">
<input name="page" value="isaPlusAO" type="hidden">
<input type="hidden" name="WLSEDOLS" value="">
<input type="hidden" name="WLSEDOLS_INSIDE_ISA_VALUES" value="">
<input type="hidden" name="WLSEDOLS_OUTSIDE_ISA_VALUES" value="">
<input name="oafRate" value="0.45" type="hidden">
<input name="vatable" value="false" type="hidden">
<input name="Advicegiven" value="no" type="hidden">
<input name="partner" value="best" type="hidden">
<input name="Context" value="isaPlusAO" type="hidden">
<input name="IGNORE_RemoveUserFromSession" value="yes" type="hidden">
<input name="isNewClient" value="true" type="hidden">
<input name="AdviserClient" value="1" type="hidden">
<input name="AgentCode" value="170224" type="hidden">
<input name="returnURL" value="http://select.bestinvest.co.uk" type="hidden">
<input name="Title" value="" type="hidden">
<input type="hidden" name="Surname" size="25" maxlength="25" value="">
<input type="hidden" name="FirstNames" size="25" maxlength="25" value="">
<input type="hidden" name="HouseName" size="25" maxlength="25" value="">
<div class="ColSplit Third inset insetThird" style="border-bottom: 2px solid #E1E1E1;">
<h2 class="NoBorder">Select an investment option with FundsNetwork</h2>
<p>
To transact through FundsNetwork you will firstly need to login to your
<a href="https://www.fidelity.co.uk/investor/site/general/jsp/general_set_cookie.jsp"
title="Link to FundsNetwork account manager. (opens in a new window)"
target="_blank">FundsNetwork Account Manager </a>.
To access this you will need your
FundsNetwork Customer Reference Number (a ten digit number beginning with ‘1’
that can found on your most recent statement from FundsNetwork) and pin. Please
call FundsNetwork on 0800 995511 if you need help logging in to the account manager.
</p>
<div class="cta fRight">
<input title="Link to FundsNetwork account manager. (opens in a new window)" type=submit value=Go class="button">
</div>
</div>
</form>

Submit form information to database based on radio button selection

Kinda lost in the sauce here...pretty green coming into the ASP.net realm, but have been enjoying my time in it so far.
So let me start from the beginning with this:
Background: I am working on a ASP.net MVC5 application with user login informtion. The user will create an account, recieve messages, etc. The critical component is that there will be a form on the site that allows the user to submit information in a Conditional Logic HTML Form complete with radio buttons, text areas and more. My end goal is to allow the user to fill out and submit the form, therefore submitting it to the MySQL database, sending an email to admin and the user with their selected elements and then populating their responses within their "Account Dashboard" area.
Problem: I am trying to get the user submitted information based on their radio button selection in the HTML Form, which would come in 3 different scenarios:
Web Project
2D Design Project
3D Design Project
So if the user chooses "Web" instead of "Graphic" in the "Project Type" form field, they would be submitting only values related to "Web". The problem I am running into is not being sure on the best way to accomplish this...
Here's the code I've started creating for when the user chooses a Web project for submission to the database:
if (IsPost) && (RadioButton.projectType.Equals(Web))
{
projectType = Request.Form["Web"];
TypeOfWebsite = Request.Form["TypeOfWebsite"];
DeviceExperience = Request.Form["DeviceExperience"];
}
Here is the form values:
<form method="post">
<br />
<div class="row">
<label class="formquestion col-md-3">Project Name:</label>
<input class="col-md-9" type="text" placeholder="Enter project name..." />
</div>
<div class="row">
<label id="ProjectType" for="ProjectType" class="formquestion col-md-3">Project Type: </label>
<span class="col-md-8">
<input id="Web" name="ProjectType" type="radio" value="#Request.Form["Web"] value=" web" />
<label for="Web">Web</label>
<input id="Graphic" name="ProjectType" type="radio" value="Graphic" />
<label for="Graphic">Graphic</label>
</span>
</div>
<div class="hidefield" id="WebProject">
<div class="row">
<label class="formquestion col-md-3">Type Of Website: </label>
<span class="col-md-8">
<input id="WebApplication" name="TypeOfWebsite" type="radio" value="1" />
<label class="Web Application" for="Web Application">Web Application*</label>
<input id="eCommerce" name="TypeOfWebsite" type="radio" />
<label class="choice" for="eCommerce">eCommerce</label>
<input id="SocialNetwork" name="TypeOfWebsite" type="radio" />
<label class="choice" for="SocialNetwork">Social Network</label>
<input id="Forum" name="TypeOfWebsite" type="radio" />
<label class="choice" for="Forum">Forum</label>
<input id="PackageDesign" name="TypeOfWebsite" type="radio" />
<label class="choice" for="PackageDesign">News/Article</label>
<input id="Interactive" name="TypeOfWebsite" type="radio" />
<label class="choice" for="Interactive">Interactive</label>
<input id="InformationalPersonal" name="TypeOfWebsite" type="radio" />
<label class="choice" for="InformationalPersonal">Informational/Personal</label>
<p>*Not exactly sure what a web application is? Well...think TurboTax, Zamzar, Mint, Online Banking Services, MailChimp and Google Docs. </p>
</span>
</div>
<div class="row">
<label class="formquestion col-md-3" for="DeviceExperience">Device Experience: </label>
<span class="col-md-8">
<input id="Desktop" name="DeviceExperience" type="radio" value="1" />
<label for="Desktop">Desktop</label>
<input id="Tablet" name="DeviceExperience" type="radio" />
<label for="Tablet">Tablet</label>
<input id="Mobile" name="DeviceExperience" type="radio" />
<label for="Mobile">Mobile</label>
<input id="Responsive" name="DeviceExperience" type="radio" />
<label for="Responsive">Responsive</label>
</span>
</div>
</div>
<div class="hidefield" id="GraphicDimensions">
<div class="row">
<label class="formquestion col-md-3">Design Dimensions: </label>
<span class="col-md-8">
<input id="2D" name="Dimension" type="radio" value="2D" />
<label class="choice" for="Web">2D</label>
<input id="3D" name="Dimension" type="radio" value="3D" />
<label for="3D">3D</label>
</span>
</div>
</div>
<div class="hidefield" id="2DGraphicProject">
<div class="row">
<label class="formquestion col-md-3">Choose 2D Design: </label>
<span class="col-md-8">
<input id="BusinessCard" name="2DDesign" type="radio" value="1" />
<label class="BusinessCard" for="BusinessCard">Business Card</label>
<input id="Flyer" name="2DDesign" type="radio" />
<label class="choice" for="Flyer">Flyer</label>
<input id="Poster" name="2DDesign" type="radio" />
<label class="choice" for="Poster">Poster</label>
<input id="PrintAd" name="2DDesign" type="radio" />
<label class="choice" for="PrintAd">Print Ad</label>
<input id="PackageDesign" name="2DDesign" type="radio" />
<label class="choice" for="PackageDesign">Package Design (Food/Product/Media)</label>
<input id="Logo" name="Logo" type="radio" />
<label class="choice" for="Logo">Logo</label>
</span>
</div>
</div>
<div class="hidefield" id="hide3DDesignExplaination">
<div class="row">
<label class="formquestion col-md-3" for="3DDesign">Explain this 3D Design project: </label>
<textarea id="3DDesignExplaination" name="3DDesignExplaination" class="textareaform"></textarea>
</div>
</div>
<div class="hidefield" id="ProjectObjective">
<div class="row">
<label class="formquestion col-md-3" for="Objective">Project Objective:</label>
<textarea id="ObjectiveExplaination" name="ObjectiveExplaination" class="textareaform" placeholder="What is this website's primary objective? Sell me on it!"></textarea>
</div>
</div>
<div class="hidefield" id="DesignCopy">
<div class="row">
<label class="formquestion col-md-3" for="DesignCopy">Design Copy </label>
<textarea id="DesignCopy" name="DesignCopy" class="textareaform" placeholder="Any messeging/text/info needed to be included?"></textarea>
</div>
</div>
<div class="hidefield" id="TargetAudience">
<div class="row">
<label class="formquestion col-md-3" for="TargetAudience">Describe Your Target Audience:</label>
<textarea id="TargetAudienceExplaination" name="TargetAudienceExplaination" class="textareaform" placeholder="Who is your target audience? What are their ages? What do they do for a living? Elaborate!"></textarea>
</div>
</div>
<div class="hidefield" id="Keywords">
<div class="row">
<label class="formquestion col-md-3">Keywords To Describe This Project:</label>
<input class="col-md-9" type="text" placeholder="Give me 3 keywords!">
</div>
</div>
<div class="hidefield" id="FirstInteraction">
<div class="row">
<label class="formquestion col-md-3" for="UserFirstInteraction">User First Interaction:</label>
<textarea id="UserFirstInteraction" name="UserFirstInteraction" class="textareaform" placeholder="What Should The User Do First Upon Visiting The Website?"></textarea>
</div>
</div>
<div class="hidefield" id="General2">
<div class="row">
<label class="formquestion col-md-3" for="FavoriteColors">3 Favorite Colors?</label>
<input type="text" class="a-popup" data-color-format="hex" value="GreenYellow">
<input type="text" class="a-popup" data-color-format="hex" value="GreenYellow">
<input type="text" class="a-popup" data-color-format="hex" value="GreenYellow">
<small>Hint: you can type in any CSS color (even named ones, like yellow).</small>
</p>
</div>
<div class="hidefield" id="Necessities">
<div class="row">
<label class="formquestion col-md-3" for="UserFirstInteraction">Necessities:</label>
<textarea id="DesignCopy" name="ProjectReason" class="textareaform" placeholder="What are necessities for this project? Specific graphic/sitefunctionalities?"></textarea>
</div>
</div>
<h5 class="bkgblack center-align col-md-11">Provide URL's of Site/Graphics (whatever is applicable) that design you admire</h5>
<div class="row">
<label class="formquestion col-md-3" for="AdmireURL1">URL #1: </label>
<input id="AdmireURL1" name="AdmireURL1" type="text" maxlength="255" title="" value="http://" />
</div>
<div class="row">
<label class="formquestion col-md-3" for="AdmireURL2">URL #2: </label>
<input id="AdmireURL2" name="AdmireURL2" type="text" maxlength="255" title="" value="http://" />
</div>
<div class="row">
<label class="formquestion col-md-3" for="AdmireURL3">URL #3: </label>
<input id="AdmireURL3" name="AdmireURL3" type="text" maxlength="255" title="" value="http://" />
</div>
<div class="hidefield" id="RivalURL">
<h5 class="bkgblack center-align col-md-11">Provide URL's for "competitor" sites:</h5>
<div class="row">
<label class="formquestion col-md-3" for="RivalURL1">Rival URL #1: </label>
<input id="RivalURL1" name="RivalURL1" type="text" maxlength="255" title="" value="http://" />
</div>
<div class="row">
<label class="formquestion col-md-3" for="RivalURL2">Rival URL #2: </label>
<input id="RivalURL2" name="RivalURL2" type="text" maxlength="255" title="" value="http://" />
</div>
<div class="row">
<label class="formquestion col-md-3" for="RivalURL3">Rival URL #3: </label>
<input id="RivalURL3" name="RivalURL3" type="text" maxlength="255" title="" value="http://" />
</div>
</div>
</div>
<br />
<div class="hidefield" id="ProjectReason">
<div class="row">
<label class="formquestion col-md-3" for="UserFirstInteraction">Project Reason:</label>
<textarea id="DesignCopy" name="ProjectReason" class="textareaform" placeholder="Why does your target audience NEED this project to exist?"></textarea>
</div>
</div>
<div class="row">
<form action="file-upload.php" class="dropzone"></form>
</div>
<button type="submit" name="SubmitForm" class="btn btn-info btn-large">Submit Form</button>
</form>
The various MSDN tutorials I have been looking at to better understand:
http://www.asp.net/web-pages/tutorials/introducing-aspnet-web-pages-2/form-basics
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.radiobutton.aspx
These tutorials haven't made it clear to me on how to create these essential 3 conditional statements for my form:
"If user has chosen Project Type = "Web" and submitted the form, send (insert form variables) to the database"
"If user has chosen Project Type = "Graphic" then Dimension = "2D" and submitted the form, send (insert relative values) to the database"
"If user has chosen Project Type = "Graphic", then Dimension = "3D" and submitted the form, send (insert relative values)" to the database"
Recap:
How do I write the conditional statement to accomplish this?
Should I reconsider the HTML form format I am using in favor of ASP Web Pages?
I have written some JavaScript to show the available form values based upon user selection to follow this schema using the "value" of each field. It works just as intended! Now I'm just trying to connect dots on how to submit this information to the database so I can use it in the user profile. Any thoughts/answers would be greatly welcomed!

That's a complex form. But, for the sake of simplicity I will reduce the number of fields in your form to give you an idea of how things are the MVC way.
I'll start by pointing out that you are not taking the full advantage of MVC. It stands for Model-View-Controller, which is a design pattern. You probably know that stuff, but, I don't see a hint in your code that tells me you are using models in your project, you don't have to...but since you are starting with MVC you should. So, suppose you have the following models...
public class ProjectTypeModel
{
public string Name { get; set; }
}
public class TestModel
{
public IList<ProjectTypeModel> Types { get; set; }
}
Then you're view declares that same model...
#model MvcTest.Models.TestModel
This goes on the top of the view file, the first line of code. The simplified form would look like this...
#using(Html.BeginForm("ProcessTypes","Home")){
<div class="row">
<label class="formquestion col-md-3">Project Type: </label>
<span class="col-md-8">
#foreach (var p in Model.Types)
{
<input id="#("radio_" + p.Name)" type="radio" name="SelectedProjectType" value="#p.Name" />
<label for="#("radio_" + p.Name)">#p.Name</label>
}
</span>
</div>
<input type="submit" name="SubmitForm" class="btn btn-info btn-large" value="Submit Form" />
}
The only thing to note here is that the radio buttons MUST have the same name. The id is not too relevant, just make them unique so you can set the label's for attribute, this way when you click the label the radio button will change its state. The last thing to notice is the form is posting to the "ProcessTypes" action of the Home controller...
and your Home controller's action will look something similar to this...
public ActionResult ProcessTypes(string SelectedProjectType)
{
//processing here...
}
Obviously, the SelectedProjectType will have come with the value of the radio button you selected..."Web" or "Design".
Even though this is a very simplified example you can get an idea of how things work in MVC (and Razor). There's a bit more to cover but I'm sure you will find out by yourself.
Hope it makes sense

jquery formwizard last step not showing

is there any reason that my final step i call confirmation isn't showing in the formwizard?
<form id="wizardForm" action="" method="post">
<div id="fieldWrapper">
<div class="step" id="first">
<span class="font_normal_07em_black step_title">Site Information</span><br />
<label for="Title">Title</label>
<input id="Title" class="input_field_12em required" type="text" />
<label for="Description">Description</label>
<input id="Description" class="input_field_12em required" type="text" />
<label for="UrlName">Url Name</label>
</div>
<div class="step" id="ownerInfo">
<span class="font_normal_07em_black step_title">Site Owner</span>
<label for="PrimaryOwner">Primary Owner</label>
<input id="PrimaryOwner" class="input_field_12em required" type="text" />
<label for="SecondaryOwner">Secondary Owner (nt id)</label>
<input id="SecondaryOwner" class="input_field_12em required" type="text" />
</div>
<div class="step" id="siteAccess">
<span class="font_normal_07em_black step_title">Site Access</span>
<label for="I">Public or private info <br />
Will private information be stored in this space?</label>
<input id="iYes" name="I" type="radio" value="Yes" />Yes<br />
<input id="iNo" name="I" type="radio" value="No" />No
<hr />
<label for="T">Will T Information be stored on this space?</label>
<input id="TYes" name="T" type="radio" value="Yes" onclick="ToggleT()" />Yes<br />
<input id="TNo" name="T" type="radio" value="No" onclick="ToggleT()" />No
<div id="tAcknowledgeContainer" class="hidden_contain">
<input type="checkbox" id="tCheckbox" /><span class="checkbox_label">I acknowledge </span>
</div>
<hr />
<label for="C">Will space need to Control content?</label>
<input id="cYes" name="C" type="radio" value="Yes" onclick="ToggleC()" />Yes<br />
<input id="cNo" name="C" type="radio" value="No" onclick="ToggleC()" />No
<div id="cAcknowledgeContainer" class="hidden_contain">
<input type="checkbox" id="cCheckbox" />
<span class="checkbox_label">I agree </span>
</div>
<hr />
<label for="F">Is Other User Access Required?</label>
<input id="FYes" name="F" type="radio" value="Yes" onclick="ToggleF()" />Yes<br />
<input id="FNo" name="F" type="radio" value="No" onclick="ToggleF()" />No
<div id="fPleaseNoteContainer" class="hidden_contain">
<span class="please_note"><strong>Please Note</strong><br />
</span>
</div>
<hr />
<label for="N">Non Employee(s)?</label>
<input id="NYes" name="N" type="radio" value="Yes" onclick="ToggleN()" />Yes<br />
<input id="NNo" name="N" type="radio" value="No" onclick="ToggleN()" />No
<div id="nAcknowledgeContainer" class="hidden_contain">
<input type="checkbox" id="nCheckbox" />
<span class="checkbox_label">
I agree
</span>
</div>
</div>
<div class="step" id="siteSharing">
<span class="font_normal_07em_black step_title">Site Sharing</span>
<div class="side_by_side_container">
<div class="left_container">
<input id="SharingRestrictionN2S" name="SharingRestriction" type="radio" value="N2S" />
<span class="generic_label">Public</span><br />
</div>
<div class="right_container">
<input id="SharingRestrictionN2K" name="SharingRestriction" type="radio" value="N2K" />
<span class="generic_label">Private</span><br />
</div>
</div>
</div>
<div class="step" id="agreement">
<span class="font_normal_07em_black step_title">Agreements</span>
<div>
<br />
<div>Business Agreement</div>
<iframe id="bFrame" class="generic_iframe" src="<%= ConfigurationManager.AppSettings["businessUrl"] %>"></iframe>
<br /><br />
<hr />
<br />
<div>Service Agreement</div>
<iframe id="sFrame" class="generic_iframe" src="<%= ConfigurationManager.AppSettings["sericeUrl"] %>"></iframe>
<br /><br />
<hr />
<br />
I agree
</div>
<br />
<input id="sbAggrement" class="required" type="checkbox" />
<span class="checkbox_label">
i agree
</span>
</div>
<div id="final" class="step submit_step">
<span class="font_normal_07em_black step_title">Confirmation</span>
<input type="text" name="temp1" />
</div>
</div>
<br />
<hr class="form_divider" />
<div id="wizardNavigation">
<input class="navigation_button" value="Back" type="reset" />
<input class="navigation_button" value="Next" type="submit" />
</div>
</form>
seems like it submits on the prior step and doesn't even hit this step. i thought you had to include the class step and submit_step because when i remove "step" it doesn't add this as another wizard step. if displays it on the bottom of every step.
also on the final submit, has anyone done anything where they call ajax to perform the submit so that if an error occurs the user doesn't leave the page and still has all their data to attempt again?
i am using c#, mvc2 and testing with Firefox browser

add onsubmit="return false;" to the form to make it so u can manipulate the post data
and in the jquery:
$("form").submit(function(){
$.post('postFile....',$(this).serialize(),function(data){
console.log(data);
//do something with data
})
})

When the Wizard button caption is next it will fire the
$("#form1").bind("step_shown", function (event, data) {
if (data.currentStep == "Div0") {
//Code that needs to be implemented in the step 0
}
if (data.currentStep == "Div1") {
//Code that needs to be implemented in the step 1
}
});
But when the Wizard button caption is Submit the final step in Wizard will be fired in the method mentioned bellow
$("#form1").formwizard({
formPluginEnabled: true,
validationEnabled: true,
focusFirstInput: true,
formOptions: {
success: function (data) {
//Last step completed message
},
beforeSubmit: function (data) {
//Code that need to be implemented for the submit method
},
dataType: 'json',
resetForm: true
}});
Please let me know has this resolved your issue.
:) Coding :)

i found an issue. it seems that the required class on the checkbox before the final confirmation step was throwing a javascript error.
<input id="sbAggrement" class="required" type="checkbox" />
i removed the required class and the final step is displayed when the next button is clicked. Now onto the next problem, why is the required class on the checkbox throwing a javascript error.......
instead of having the required class on the input, I added the checkbox to the validationOptions and it works perfectly now

Model binding to a List - how to handle inserts

I am referring to this post from Phil Haack http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx I need to do the same but what if I need to insert records in the list, at any index I wanted? How do I keep the indexes in sync short of doing some Javascript and updating all indexes?
<form method="post" action="/Home/Create">
<input type="text" name="[0].Title" value="Curious George" />
<input type="text" name="[0].Author" value="H.A. Rey" />
<input type="text" name="[0].DatePublished" value="2/23/1973" />
<input type="text" name="[1].Title" value="Code Complete" />
<input type="text" name="[1].Author" value="Steve McConnell" />
<input type="text" name="[1].DatePublished" value="6/9/2004" />
<!-- I want to insert a record here by adding the fields through JavaScript -->
<input type="text" name="[2].Title" value="The Two Towers" />
<input type="text" name="[2].Author" value="JRR Tolkien" />
<input type="text" name="[2].DatePublished" value="6/1/2005" />
<input type="submit" />
I didn't quite understand how I would use the "Non-Sequential Indices" described on that blog post for doing stuff like inserting records to specific index.
Any ideas?