I would like to bind my object to my view using #Html.DisplayFor helpers. Then click an edit button and change them to #Html.DisplayTextBoxFor helpers. I want to make this change client side.
For Example: Using a View like below
#Using Html.BeginForm("profile", "user", FormMethod.Post)
#<h2>User Profile</h2>
#<div>
#Html.LabelFor(function(m) m.email)
#Html.DisplayFor(function(m) m.email)
</div>
<input type="button" class="btn-primary" value="Edit Mode" />
<input type="submit" class="btn-primary" value="Save" />
End Using
On clicking the "Edit Mode" button, I want the email to become an editable textbox. Which I will then submit back in my form.
What you are asking is not possible. You cannot run server code on the client.
Therefore, you have to choose another option:
Use a TextBox, also for showing the content, disable and enable them when needed;
Use a AJAX call to load the edit form from the server. Create an Action that returns a PartialView to output and load it in place of the display part (you can use jQuery for example to get the actual results from the server);
Do a full postback to the server and reload the entire page.
You do not have to use is DisplayFor() in this case
#Html.TextBoxFor(x => x.email, new {#readonly = "true", id = "email"})
<input type="button" class="btn-primary" value="Edit Mode" id="edit" />
Then with JQuery
<script>
$('#edit').on('click', function () {
$('#email').attr('readonly', 'false');
});
</script>
You will need to add an id to the button to access.
Related
I am trying to use alpine.js to update a form's action, and am running into some confusion.
My code:
<div x-data="data=''">
<template x-if="data.url">
<div>
<form method=POST :action="data.url">
<input type="text" x-model="data.sitenumber">
<button type="submit">Submit form</button>
</form>
</div>
</template>
<input type="button" value="add data" #click="data = {url: 'www.com', sitenumber: 23}">
</div>
When I click on the button, the div form doesn't appear. My ultimate goal is to have a modal popup that is dynamically updated with an action button (delete record, etc.) when a link/button elsewhere in the document is clicked.
I tried following long with this ToDo app tutorial, but this creates a separate function, and I thought it would be possible to pass simple data variables to a different part of the div, especially since I'm not looping through an array.
Thanks!
I think the issue is that you do x-data="data=''" instead of using object initialisation syntax: x-data="{ data: '' }"
>
This is the code I have for my html. I want to make that submit button to link to my main page.
When I do that, I does shot '>' button and it goes into next page.
I just want it to look like original submit button instead of '>'
FYI --- if your submit button just links to a page, none of the information you're trying to submit will actually go anywhere. If you want the submit button to actually submit something, you're going to need some Javascript.
Agreeing with #pierre, just use the a tag
>
Becomes
Log In
Then just add whatever styles you wanted for the input to the a tag. Also you have a double > after the input tag, which doesn't have a closing. So could this be what you want?
<input type="submit" class="fadeIn fourth" id="submit" value="Log In" />
Edits
<input type="submit" class="fadeIn fourth" id="submit" onclick="link_data" value="Log In" />
<script>
function link_data() {
// Send data
window.location.href = "main.jsp"; // This will change the page location to main.jsp
}
</script>
If you want it to look like a button without the input please have a look at Here or make your own using CSS
I read several answers on this topic but they don't seem to apply to my problem. My problem is quite complex. I have a form which uses ReportViewer.ASPX. The form is defined as following:
<form name="form" novalidate role="form"
sm-dirty-check
id="reportViewer"
method="post"
action="~/Infrastructure/ReportViewer/reportViewer.aspx"
target="viewerIFrame"
ng-show="crud.showForm" class="ng-cloak">
#* Form inputs *#
<input type="hidden" name="labelType" value="Rental" />
<input type="hidden" name="labelLayoutId" value="{{ crud.model.lbLayoutId }}" />
<input type="hidden" name="itemsToPrint" value="{{ crud.jsItemsToPrint }}" />
The actual forms are defined in the tabs using ng-form (I only shared the top portion of my Edit form which is relevant to my question).
I also have these buttons at the bottom of the form:
<button type="submit"
ng-if="crud.model.lbLayoutId!==0"
name="generateLabelButton"
id="generateLabelButton"
class="btn btn-primary pull-left"
ng-click="crud.generateLabel()"
ng-disabled="crud.isSaveButtonDisabled">
#Labels.generateLabel
</button>
<div class="pull-left generateLabelButton">
<data-desc:type ng-if="crud.model.lbLayoutId===0"
value="#Labels.generateLabel"
keep-pristine="true"
on-after-selection="crud.layoutSelected(selectedValue)"
title="{{ '#string.Format(Labels.selectX, Labels.labelLayout)'}}"
param="layouts"
message="#string.Format(Labels.selectX, Labels.labelLayout)"
selected="crud.model.lbLayoutId"
descrip-value="descrip"
id="layoutPickerButton"
name="layoutPickerButton"
button-type="button"
type="7"
filter-by="Label"
description="crud.model.lbLayout">
</data-desc:type>
</div>
So, if I have lblLayoutId defined, I have my regular submit button and I press it and get my form submitted and all is well.
If I don't have the lblLayoutId defined (it's 0), I need to use a directive which has a template for a button, when I press it, it opens a modal form to pick the layout, etc.
So, my problem is that after I picked the layout, I need to submit my form so the label can appear.
I tried making the directive to be of type submit (button-type property), this didn't work.
I also tried the following code in the method which is executed by the button when value is selected:
rentalEquipmentsCrudController.prototype.layoutSelected = function (selectedValue) {
this.model.lbLayoutId = selectedValue;
$("#generateLabelButton").click();
}
rentalEquipmentsCrudController.prototype.generateLabel = function () {
if (this.model.lbLayoutId === 0) return;
this.jsItemsToPrint = "";
this.itemsToPrint = this.getItemsToPrint();
this.jsItemsToPrint = JSON.stringify(this.itemsToPrint);
angular.element($("#viewerIFrame").contents()
.find("#reportViewer_ReportViewer")).empty();
let actionPath = angular.element($("#reportViewer")).attr("action");
if (actionPath.slice(-3) !== "pdf") actionPath += "/Labels.pdf";
angular.element($("#reportViewer")).attr("action", actionPath);
this.showViewer = true;
};
The layoutSelected method is executed from my directive and the next code is executed by my regular button.
So, I'm at lost as how to make it work.
The role of forms in client-side AngularJS applications is different than in classical roundtrip apps, it is desirable for the browser not to translate the form submission into a full page reload. Instead post JSON data and receive JSON data responses. Go to the server for data, but not html/js/css etc.
Read AngularJS <form> Directive API Reference - Submitting a form and preventing the default action.
You don't want to combine ng-click with a button of type="submit", this will still cause the form to submit (non-programmatically). Instead, use type="button". Alternatively, you can keep type="submit" but add the ng-submit="crud.generateLabel()" to the form element
<form>
...
<button type="button" ng-click="crud.generateLabel()">...</button>
</form>
Alternatively:
<form ng-submit="crud.generateLabel()">
...
<button type="submit">...</button>
</form>
I have a web application got from my client to do some changes on it. Here, is one button named Submit. If user clicks this button then it check on database and get the result but I can't find the code for this button. I need to change the query but I cannot find the source.
Here is the aspx code:
<asp:Button ID="Submit" runat="server" Text="Submit" CssClass="btn btn-info" ValidationGroup="submit" />
But if I inspect element using firefox then I can see this:
<input type="submit" name="Submit" value="Submit" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("Submit", "", true, "submit", "", false, false))" id="Submit" class="btn btn-info"/>
I don't understand where does this onclick function comes from and how it works with the SQL query.I cannot find any click event into the .cs file as well. Please advise me on this.
Check PostBackUrl property for the Button server control.
Put at the onClick="Submit" in ur button field like
then on code behind the click event method will be shown and do your code
Im actually having a problem with html5 button in visualforce pages. I have a requirement where when i click on a button, it should redirect to a certain page (user do not want link). For some reason which i don't know, the function i'm executing do not work with HTML5 button (in fact the page only refresh but do not redirect) but when i use input of type button, the function is executed as expected.
I want to use the html5 button as there are some specific css already defined for button in the plugin im using. Find below codes for my button and javascript function :
<button class="butt" onclick="newContact()" >Nouveau</button>
<script type="text/javascript">
function newContact(){
window.location = "/apex/VFP01_NewContact";
}
</script>
What did I do wrong here, and what is the limitation of html5 button ?
Got to know the answer. In visualforce page, the html5 button execute a submit of my form. A way to prevent this, was to specify the attribute type="button".
You really have two options.
You could consider wrapping a element with an anchor tag that points to the URL that you want to target as seen below :
<!-- Target the "YourAction" action in your "YourController" controller -->
<a href='#Url.Action("YourAction","YourController")'>
<input type="Button" id="mybutton" name="url button" value="Next" />
</a>
or you could handle this purely through Javascript and perform your navigation that way :
<!-- The onclick event will trigger a Javascript call to navigate -->
<input type="Button" id="mybutton" name="url button" value="Next" onclick="window.location.href='#Url.Action("YourAction","YourController")';" />