hide buttons in web forms app if being page has two user control refs - webforms

I am working on a web forms app where one of my user controls is used on multiple pages. Is there a simple if/else statement that can hide a div if not referenced to a specific page. For instance, I have a button group that is showing in both page A and B but I only need it to show on page B if that page is active. Any help will be appreciated.
Here is the button group I wish to have only shown on one user control:
<asp:Label ID="lblQty" runat="server" AssociatedControlID="txtQuantity">Quantity</asp:Label>
<div class="row">
<div class="col-xs-12 col-md-6">
<div class="input-group mb-3">
<div class="input-group-prepend">
<button type="button" class="btn btn-primary" onclick="changeQuantity('minus');" id="minus-btn"><i class="fa fa-minus"></i></button>
</div>
<asp:TextBox ID="txtQuantity" cssClass="form-control form-control-sm" runat="server" value="1" min="1" max= ClientIDMode="Static"></asp:TextBox>
<div class="input-group-prepend">
<button type="button" class="btn btn-primary" onclick="changeQuantity('plus');" id="plus-btn"><i class="fa fa-plus"></i></button>
</div>
</div>
</div>
</div>
This is the block that is showing on two different .ascx controls.

You can add a public property in the ascx control:
public string MyPage { get; set; }
and in a method (or in a PreRender event) you can use:
public void MyMethod()
{
MyButton.Visible = MyPage == "B";
}
You can set the property from page B.aspx
<%# Register TagPrefix="cc" TagName="MyControl"
Src="~/Controls/MyControl.ascx" %>
<cc:MyControl runat="server" Id="MyControlId" MyPage="B" />

Related

Event Binding from within a Blazor Component

googling didn't help me, I hope you can. I have a Modal.razor component like so:
<div class="modal" id="#Id">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">#Header</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
#Body
</div>
<div class="modal-footer">
#Footer
</div>
</div>
</div>
#code {
[Parameter] public string Id { get; set; }
[Parameter] public RenderFragment Header { get; set; }
[Parameter] public RenderFragment Body { get; set; }
[Parameter] public RenderFragment Footer { get; set; }
}
On my Links.razor view I've got:
<Modal Id="myModalEdit" >
<Header>
Edit Link
</Header>
<Body>
<EditForm Model="#SelectedItem" OnValidSubmit="#Update">
<DataAnnotationsValidator />
<div class="form-group">
<label>Label:</label>
<div>
<InputText class="form-control" #bind-Value="#SelectedItem.Label" />
<ValidationMessage For="#(() => SelectedItem.Label)" />
</div>
</div>
<div class="form-group">
<label>Url:</label>
<div>
<InputText class="form-control" #bind-Value="#SelectedItem.Url" />
<ValidationMessage For="#(() => SelectedItem.Url)" />
</div>
</div>
<div class="form-group">
<label>Notes:</label>
<div>
<InputText class="form-control" #bind-Value="#SelectedItem.Notes" />
<ValidationMessage For="#(() => SelectedItem.Notes)" />
</div>
</div>
<button type="submit" class="btn btn-primary" data-dismiss="modal">Update</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</EditForm>
</Body>
</Modal>
The Update method works perfectly well when I put the EditForm outside of the Modal Component. How do I make it work inside the Modal Component?
Thanks in advance.
Description such as working perfectly well or not working are clearly not helpful.. However, I guess the issue is that the call to the submit button result in the rendering of the parent component where your Model component resides.
Understand this, the submit button does not really cause the submission of the form data to the server. It does not lead to the tradition post back. Remember, Blazor is a SPA, no post back. As a matter of fact, the submit event is intercepted and cancelled or prevented.
Solution: Use a button with the #onclick directive, such as this:
<button #onclick="Update" type="button" class="btn btn-primary" data-dismiss="modal">Update</button>
Note that the Update method should be defined in the parent component, automatically calling the StsteHasChanged method to re-render your page. If it still does not work, wait for good news...

Jasny file upload postedfile always null

Why is the PostedFile property always null even when a file is selected? The file upload appears to be working properly as far as allowing me select a file. But when the submit button is clicked that instantiates the code where the selected file is used, the PostedFile property is null.
This is my ascx code:
<div id="fileUploadDiv" class="row">
<div class="col-xs-12 push-left">
<div class="row">
<div class="col-xs-3 col-md-2 text-left form-group required label-wrapper">
<asp:Label
ID="Label1"
runat="server"
class="lblFileUpload"
Text="File to upload:"
CssClass="control-label"
EnableViewState="false" />
</div>
<div class="col-xs-9 col-xs-10 text-left">
<div class="fileinput fileinput-new input-group pull-left" data-provides="fileinput">
<div class="form-control" data-trigger="fileinput" style="max-width: 30em;">
<span class="fileinput-filename"></span>
</div>
<span class="btn btn-file">
<span class="fileinput-new">
<asp:Button
ID="Button4"
runat="server"
CssClass="button pink inline-narrow pull-right"
Text="Select File" />
</span>
<span class="fileinput-exists">
<asp:Button
ID="Button5"
runat="server"
CssClass="button pink inline-narrow pull-right"
Text="Change" />
</span>
<input
id="inputUploadFile"
runat="server"
type="file"
name="..."
accept=".jpg, .jpeg, .png, .eps, .pdf, .ai"
enctype="multipart/form-data">
</span>
<a href="#"
class="btn fileinput-exists"
data-dismiss="fileinput">
<asp:Button
ID="Button6"
runat="server"
CssClass="button pink inline-narrow pull-right"
Text="Remove" />
</a>
</div>
</div>
</div>
</div>
</div>
This is my c# code:
protected void btnAddUpdate_Click(object sender, EventArgs e)
{
...
byte[] fileData = null;
using (var binaryReader = new BinaryReader(inputUploadFile.PostedFile.InputStream)) //PostedFile is always null.
{
fileData = binaryReader.ReadBytes(inputUploadFile.PostedFile.ContentLength); //PostedFile is always null.
}
}
I found the issue. The file upload doesn't work asynchronously. The problem was solved by adding the following two lines of code to the OnInit method:
ScriptManager.GetCurrent(this.Page).RegisterPostBackControl(this.btnSave);
Page.Form.Attributes.Add("enctype", "multipart/form-data");
Where this.btnSave is the submit button on the page.

Why href in button doesn't redirect to link?

I have a html view and this view displays list of elements. All elements have two buttons (edit and delete). When I click on delete all is working correctly but when I click on edit new view is not displayed. When I want to enter my direct url to edit it, all is working...
This is fragment of my code:
<div class="container">
<!-- topics -->
<div class="row topic" th:each="user : ${users}">
<div class="col-4">
<p>
<div class="input-group-addon" style="width: 2.6rem"><i class="fa fa-at"></i></div>
<a class="title " th:href="#{'/user/' + ${user.id}}" th:text="${user.email}"></a>
</p>
</div>
<div class="col-4">
<p>
<div class="input-group-addon" style="width: 2.6rem"><i class="fa fa-user"></i></div>
<a class="title " th:href="#{'/user/' + ${user.id}}" th:text="${user.fullName}"></a>
</p>
</div>
<div class="col-2">
<form action="#" th:action="#{'/user/drop/{id}'(id=${user.getId()})}" th:method="delete" >
<input type="hidden" name="_method" value="delete" />
<button type="submit" class="btn btn-danger">Usuń użytkownika</button>
</form>
</div>
<div class="col-2"></div>
<!--My failed button-->
<button type="submit" class="btn btn-warning" th:href="#{'/user/edit/' + ${user.id}}">Edycja</button>
</div>
</div>
</div>
A <button> has no href attribute. What you're looking for is a "link" (an <a> "anchor" tag to be specific):
<a class="btn btn-warning" th:href="#{'/user/edit/' + ${user.id}}">Edycja</a>
The reason your other button "works" is because it's part of a <form> and it submits that form. It doesn't follow any kind of href attribute. You could also make this button part of a form, but that doesn't appear to be the intended functionality. The intended functionality here is to direct the user to a new page, so a link is appropriate.

MVC and Bootstrap 4: change style of generated button tag with DropDownListFor

In my ASP.NET MVC Core web app, I generate a dropdown via the following code in a .cshtml file:
<div>
#Html.DropDownListFor(x => x.SelectedType,
new SelectList(Model.Types, "TypeId", "Name"), "Select one...",
new
{
#class = "selectpicker",
data_show_subtext = "false",
data_live_search = "true"
})
</div>
I'm using the bootstrap-select library too, btw.
This generates the following HTML when I inspect the page in Chrome:
<div>
<div class="dropdown bootstrap-select">
<select class="selectpicker" data-live-search="true" data-show-subtext="false" data-val="true" data-val-required="Type is required."
id="SelectedType" name="SelectedType" tabindex="-98">
<!-- option tags omitted -->
</select>
<button type="button" class="btn dropdown-toggle btn-light" data-toggle="dropdown" role="button" data-id="SelectedType" title="X">
<div class="filter-option">
<div class="filter-option-inner">
<div class="filter-option-inner-inner">X</div>
</div>
</div>
</button>
<div class="dropdown-menu " role="combobox">
<div class="bs-searchbox">
<input type="text" class="form-control" autocomplete="off" role="textbox" aria-label="Search">
</div>
<div class="inner show" role="listbox" aria-expanded="false" tabindex="-1">
<ul class="dropdown-menu inner show"></ul>
</div>
</div>
</div>
</div>
All is good. However, with Bootstrap 4 I find myself needing to change the btn-light class to btn-outline-secondary in the <button> tag.
How do I do this via the HtmlHelper DropDownListFor method?
I can of course do some post-rendering stuff in JS like
$(".dropdown-toggle").removeClass("btn-light").addClass("btn-outline-secondary");
...but that seems like a fallback option and it's not optimal.

how to pass data to modal dialog in laravel (Update method usinf modal box)?

I want to create a new post in my Database using modal box, and all works fine but when I use the button edit to update the post using modal dialog doenst work, I just want to take the cod('id') via a button from my view and pass to the modal.
the button code:
<a class="tip" id="test" data-toggle="modal" data-target="#myAlert2" title="Modifier">
and this is my code modal dialog
<div id="myAlert2" class="modal hide" id="modal-edit">
<div class="modal-header">
<button data-dismiss="modal" class="close" type="button">×</button>
<h3>Modifier un espace de travail</h3>
</div>
<div class="modal-body">
<p>
<div class="form--field">
<label class="labgroupe">Sujet *</label>
<input type="text" name="sujet" id="sujet" value="" class="form--element" placeholder="Sujet..." >
</div>
<div class="form--field">
<label class="labgroupe">Objectif du groupe</label>
<input type="text" name="objectif" class="form--element" placeholder="Objectif..." >
</div>
<div class="form--field" >
<label class="labgroupe">Plan d'action:</label>
<textarea class="form--element textarea" name="textarea" placeholder="Description..."></textarea>
</div>
#endforeach
</p>
</div>
<div class="modal-footer">
<input type="submit" value="Validate" id="button2" class="btn btn-success">
<a data-dismiss="modal" class="btn" href="#">Cancel</a> </div>
</div>
Any help plz ?
you cannot use 2 id's on the same div
<div id="myAlert2" class="modal hide" id="modal-edit">
changed to
<div id="myAlert2" class="modal hide">
and use same id on data-target="#myAlert2"
Modal button:
On your script, add this:
$("#test").click(function () {
$('#id').val($(this).data('id'));
});
Then add an input in the modal called #id.
<input type="text" id="id">

Resources