Fairly new to ASP.NET CORE, come from WPF background.
Having some trouble understanding how to pass local variables around.
I have a form:
<span id="clock"></span>
<form asp-action="Create" asp-controller="Session" method="post" asp-route-session="#Model.Session">
<input asp-for="#Model.Session.ClientId" class="form-control" style="display: none" />
<ejs-dropdownlist id="clinics" dataSource="#Model.LinkableClinics" placeholder="Select Clinic" popupHeight="220px" ejs-for="#Model.Session.ClinicId">
<e-dropdownlist-fields text="Name" value="ClinicId"></e-dropdownlist-fields>
</ejs-dropdownlist>
<ejs-dropdownlist id="employees" dataSource="#Model.LinkableEmployees" placeholder="Select Employee" popupHeight="220px" ejs-for="#Model.Session.EmployeeId">
<e-dropdownlist-fields text="Name" value="EmployeeId"></e-dropdownlist-fields>
</ejs-dropdownlist>
<ejs-datetimepicker id="startdatetimepicker" placeholder="Select a date and time" ejs-for="#Model.Session.StartTime"></ejs-datetimepicker>
<ejs-datetimepicker id="enddatetimepicker" placeholder="Select a date and time" ejs-for="#Model.Session.EndTime"></ejs-datetimepicker>
<div class="form-group">
<input type="submit" value="Create Session" class="btn btn-primary" />
</div>
</form>
and I would like to add asp-route-offset to my form but I can't figure out how to pass a locally calculated variable into this routing.
This is a post, so I can't just use Url.Redirect() custom url builder.
I've also tried to add a hidden field and run a calculation inside the "value"
<input asp-for="#Model.Session.Offset" class="form-control" style="display: none" value="getValue()"/>
I'm calculating my offset in my <script> section as follows:
<script type="text/javascript">
window.onload = loaded;
function loaded() {
var clockElement = document.getElementById("clock");
function updateClock(clock) {
clock.innerHTML = new Date().getTimezoneOffset() / 60;
}
}
</script>
I've tried setting variables or the #Model object here, but nothing seems to want to stick.
Anyone have experience trying to pass a variable like this? Or a better way to pass UTC offset into my timestamp?
You're trying to mix and match things happening server-side and client-side. Your script which gets the offset runs client-side, after the server has sent the response. Your Razor code runs server-side, before the client has even received the page.
Long and short, if you want to update the value, you have to do it via client-side means, namely JavaScript:
document.getElementById('#Session_Offset').value = new Date().getTimezoneOffset();
You can't use something like asp-route-offset at all, because the offset is coming from the client and can't be used to generate the post URL. As a result, you'll need to stick with the hidden input approach.
Related
I'm using Blazor Server application in Visual Studio 2019. In the .razor page I have:
<div class="container">
<div class="row">
<div class="col-md">
<label for="ConnectionStringEdit" id="Label1">Connection String for destination</label>
</div>
<div class="col-md-7">
<input type="text" id="ConnectionStringEdit" name="ConnectionStringEdit" text=#ConnectDestination spellcheck="false" style="width: 585px; height: 26px;" class="form-control">
</div>
<div class="col-md-auto">
<input type="submit" id="btnConnect" name="btnConnect" value="Connect" class="btn btn-primary" #onclick="Connect1">
</div>
</div>
</div>
now in the code part I have
#code {
private string ConnectDestination { get; set; } = "";
private void Connect1()
{
if (ConnectDestination.Length > 0)
{
// do something
}
}
}
When I insert something in the Input and I press the button, ConnectDestination doesn't take the value of the Input Control. So this last If condition is never true. How do I get the inserted value of the Input control named ConnectionStringEdit?
Thanks
It should be #bind-value="#ConnectDestination"
you could also use the short directive #bind instead:
#bind="#ConnectDestination"
Note: All the input element's types are bound through the value attribute of the element.
Note: Both #bind-value and #bind are compiler directive instructing the compiler to emit code, behind the scene, that enables two way data-binding between a variable and an Html tag. The compiler create a two-way data binding by binding a variable to the value attribute of the element, something equivalent to this:
value="#ConnectDestination", which creates a one direction binding from the variable to the bound element. The compiler also creates an event call back which enables binding from the element to the variable, something equivalent to this:
#onchange="#((args) => ConnectDestination = args.Value?.ToString())"
This means that you could do that yourself, if you wish to have more control over the binding. You'll usually do something like this:
value="#ConnectDestination" #onchange="OnChange"
And define the call back method like this:
private void OnChange(ChangeEventArgs args)
{
// Note that it is your responsibility to update the
// ConnectDestination variable:
ConnectDestination = args.Value?.ToString());
}
Note: This is wrong:
<input type="submit" id="btnConnect" name="btnConnect" value="Connect" class="btn btn-primary" #onclick="Connect1">
The type attribute of the input element should be set to button:
<input type="button"
Blazor App is an SPA... meaning no submit. The only place you use the "submit" button is when you use the EditForm component, and even then the "submit" action is intercepted and canceled by the Blazor.
You can try
<input type="text" id="ConnectionStringEdit" name="ConnectionStringEdit" #bind=#ConnectDestination spellcheck="false" style="width: 585px; height: 26px;" class="form-control">
or
<input type="text" id="ConnectionStringEdit" name="ConnectionStringEdit" value="#ConnectDestination"
#onchange="#((ChangeEventArgs __e) => ConnectDestination = __e?.Value?.ToString())" spellcheck="false" style="width: 585px; height: 26px;" class="form-control">
This happens on all the Scaffolded Identity Razor Pages that do not include a route parameter in the Form definition, but let's take the ForgotPassword one as an example:
Here is the form as defined on the scaffolded page:
<form method="post">
<div asp-validation-summary="All" class="text-danger"></div>
<div class="form-group">
<label asp-for="Input.Email"></label>
<input asp-for="Input.Email" class="form-control" />
<span asp-validation-for="Input.Email" class="text-danger"></span>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
When I click the submit button, nothing happens. The browser dev tools confirm nothing happens. The page does not submit to the server. (and yes, I have entered a valid email address; if I don't, then the jquery validation correctly displays the appropriate error messages.)
But I've found that if I change the form definition to include a route parameter, as follows:
<form asp-route-unusedArg="SomeValue" method="post">
then the submit button works fine, and the form is submitted to the server. (Even though the OnPostAsync method defined by the server code does not expect a parameter at all; it is defined as public async Task<IActionResult> OnPostAsync()). The way I figured this out was to compare the form definition with that of the Login form, which was working fine, and had a route parameter for returnUrl.
What is going on here? Why is the form not submitting unless I add a route parameter?
I'm running into a really baffling problem where I have an extremely simple (read, newbie trying to understand) web form. The form looks like this:
<form id="myform">
<input type="text" name="t" id="t" />
<input type="submit" id="sub" value="Submit" />
</form>
Then I have some also very simple js that I just want to use to check what the value is that the user has before doing some other things and submitting.
function search()
{
var form = document.querySelector("form");
s = form.elements[0].value;
alert(form.elements[0].type);
alert(form.elements[0].value);
}
What I don't understand is why, whatever I do, the first alert shows type "text" like I want, and the second one returns nothing at all. It doesn't matter what's in the field, when I submit, it goes away before the javascript even catches it.
I also tried
document.forms["myform"].addEventListener("submit", function(event) {
event.preventDefault();
});
And it seemed to have no effect on the fact that the page always submits when I refresh, but it did stop my button from submitting.
;tldr I just want the text value from my text field so I can do some validation, but it's always empty.
edit
Let me know if I can "close" questions. The problem was how I bound the function to the button, which I hadn't even considered. Be careful with those "()"
You may have to change the keyword "search" to something else like:
<script type="text/javascript">
function doSearch() {
var t = document.getElementById('t');
alert(t.type);
alert(t.value);
}
</script>
Then this will work:
<input type="text" name="t" id="t" />
<input type="submit" id="sub" value="Submit" />
do search
I'm trying to update only part of my page from a partial View.
It works perfectly fine if i use this
Click heeeeeeeere
But this is a simple get and i'd like to actually post some data and do something with it. I wrote a form, set its method to post like this.
<form method="post" data-ajax="true" data-ajax-method="post" data-ajax-complete="completed" data-ajax-update="#panel" >
<div class="row">
id : #Html.TextBoxFor(x => x.customer.ID)
</div>
<div class="row">
Name : #Html.TextBoxFor(x => x.customer.Name)
</div>
<div class="row">
<input type="submit" value="send data" />
</div>
</form>
BUT this updates my entire page so my entire page is just the little partial view thats supposed to be updated.
a first observation, it seems you are missing the data-ajax-url from the second form .
Saying that, then in your Razor view you should include on the top of the page
#page "{handler?}"
This will allow you to pass additional information to your handler, then in your form you can simply include something like
<input type="hidden" name="id" value="send value"/>
where value is the value you want to pass and name is how the handler will identify what property to bind this to, then in your .cshtml.cs page your handler should look something like this
public IActionResult OnPostPartial(string id) {...//do something here id == "send value"}
hope this helps
I want to implement an api with vue and axios in my front-end:
methods:{
startSpider:function(event){
alert("spider is ready to run!");
let data = {'searchKey':this.searchKey,
'category':this.category,
'num':this.num};
axios.post("{% url 'main:getCommodityInfo'%}",
data,
{headers:{'X-CSRFToken': this.getCookie('csrftoken')}})
.then(response=>{
console.log(response.data)
})
.catch(error=>{
console.log(error);
alert("connection has error")
})
},
When I call this function, I expect to get data from the back-end and stay at the inital url. It does receive data but the url quickly changed.
After some exploration, I find the browser implement two request! First, POST, and next GET:
Using 'searchKey':'switch', 'category':'electronic','num':60 as an example.
and My browser url subsequently changes to
Why it happens? I have just used POST not GET. The axios post seems to automatically splice inital url with the params. I have tried a lot of ways but failed. Even I have writed a small demo with the similiar structure like this to test, but the demo runs well! What happened? Help me please...
Updated I: Give my server behavior(django-view) and my router related is path('getCommodityInfo/',views.getCommodityInfo, name = 'getCommodityInfo')
def getCommodityInfo(request):
print(request.body)
return JsonResponse({"data":True}, safe=False)
Updated II: Give my front-end form:
<form>
<label for="searchKey">KeyWords</label>
<input v-model="searchKey" placeholder="Input Search Key" type="string" class="form-control" id="searchKey" name="searchKey">
<label for="category">Commodity Category</label>
<select v-model="selected" id="category" name="category">
<option v-for="option in options" v-bind:value="option.value">
${option.text}
</option>
</select>
<br>
<label for="num">Amount</label>
<input v-model="num" placeholder="Input amount needed" type="string" class="form-control" id="num" name="num" >
<button v-on:click="startSpider" class="btn btn-default">Submit</button>
<p>KeyWords : ${ searchKey }</p>
<p>Category : ${ selected }</p>
<p>Amount: ${ num }</p>
</form>
The bug happened because of not setting button type.
We could check this:
The missing value default is the Submit Button state.
And in the front-end form there is no type for the button, so the button type will be submmit button. When click on the button, it will automatically send a get request.
Modify the button like this:
<button v-on:click="startSpider" class="btn btn-default" type='button'>Submit</button>