I'm new in the Telerik UI. When I want to customize a kendo form in asp.net razor pages. But I to rename button name. But I couldn't find any button field. I follow this link [Telerik Form][1]. I edit this form.
This is my code
<div class="card dataForm mb-3">
<div class="demo-section">
<kendo-form layout="grid" name="exampleForm" method="POST">
<form-items>
<form-item type="group" layout="grid">
<grid cols="6" />
<item-label text="Income Information - list every person living in the home" />
<form-items>
<form-item field="Name" col-span="1">
<item-label text="Name:"/>
</form-item>
<form-item field="Age" col-span="1">
<item-label text="Age:"/>
</form-item>
<form-item field="Relationship" col-span="1">
<item-label text="Relationship:"/>
</form-item>
<form-item field="Income" col-span="1">
<item-label text="Income:"/>
</form-item>
<form-item field="SourceOfIncome" col-span="1">
<item-label text="Source of Income:"/>
</form-item>
<form-item field="EBCIRoll" col-span="1">
<item-label text="EBCI Roll:" />
</form-item>
</form-items>
</form-item>
</form-items>
</kendo-form>
</div>
</div>
<style>
#example .demo-section {
max-width: 600px;
width: 600px;
}
</style>
How to control this form?
[1]: https://demos.telerik.com/aspnet-core/form/layout
With the TagHelper you need to set the buttons-template or buttons-template-id attribute. The first accepts the template as string the second the external template. Here is an example of the second option
<kendo-form buttons-template-id="myTemplate" layout="grid" form-data="#Model" name="exampleForm" on-validate-field="onFormValidateField" on-submit="onFormSubmit" on-clear="onFormClear" action="Layout" method="POST">
...
</kendo-form>
<script type="text/x-kendo-template" id="myTemplate">
<button class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary k-form-submit" type="submit">
<span class="k-button-text">Custom Submit Button</span>
</button>
<button class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-form-clear">
<span class="k-button-text">Clear</span>
</button>
Related
I'm splitting code in a Blazor file into a .cs file but am having issues with leftover markup.
Example from https://blazor.radzen.com/dialog
Using the dialogue where the markup is mixed into the code:
async Task ShowInlineDialog()
{
var result = await DialogService.OpenAsync("Simple Dialog", ds =>
#<div>
<p class="mb-4">Confirm Order ID <b>#orderID</b>?</p>
<div class="row">
<div class="col">
<RadzenButton Text="Ok" Click="() => ds.Close(true)" class="me-1" Style="width: 80px;" />
<RadzenButton Text="Cancel" Click="() => ds.Close(false)" ButtonStyle="ButtonStyle.Light" class="me-1" />
<RadzenButton Text="Refresh" Click="(() => { orderID = 10249; ds.Refresh(); })" ButtonStyle="ButtonStyle.Light" class="me-1 float-end" />
</div>
</div>
</div>);
console.Log($"Dialog result: {result}");
}
When attempting to move this snippet into the code file (.cs), the markup is failing.
Cursory searching has yield nothing, but my google-fu could be weak.
Any hints appreciated, thank you.
You can't put Razor markup in a C# class file. It must be in a Razor file so the Razor compiler can compile it.
You can define markup blocks as RenderFragments like this:
#MyButtonRow
\\....
#code {
\\...
async Task ShowInlineDialog()
{
var result = await DialogService.OpenAsync("Simple Dialog", MyDialogContent);
Console.Log($"Dialog result: {result}");
}
private RenderFragment MyDialogContent => __builder => {
<div>
<p class="mb-4">Confirm Order ID <b>#orderID</b>?</p>
<div class="row">
<div class="col">
<RadzenButton Text="Ok" Click="() => ds.Close(true)" class="me-1" Style="width: 80px;" />
<RadzenButton Text="Cancel" Click="() => ds.Close(false)" ButtonStyle="ButtonStyle.Light" class="me-1" />
<RadzenButton Text="Refresh" Click="(() => { orderID = 10249; ds.Refresh(); })" ButtonStyle="ButtonStyle.Light" class="me-1 float-end" />
</div>
</div>
</div>);
};
}
I'm facing issue and selection dropdown value from html form in selenium C#
I tried a lot but everytime I'm getting error of "unable to find element"
HTML Form
<div class="ui-store-assign-role ng-scope">
<div class="ui-assign-label">
<h3>Assign Role</h3>
<span ng-model="vm.viewModel.restrictToBol" ng-click="vm.restrictSellerPermissions(!vm.viewModel.restrictToBol,1)" class="ng-pristine ng-untouched ng-valid"><!-- ngIf: vm.viewModel.restrictToBol --><span ng-if="vm.viewModel.restrictToBol" class="ng-scope">Release from</span><!-- end ngIf: vm.viewModel.restrictToBol --><!-- ngIf: !vm.viewModel.restrictToBol --> BOL</span>
</div>
<div class="ui-assign-role-tags">
<!-- ngRepeat: customerRole in vm.viewModel.userRoles --><div ng-repeat="customerRole in vm.viewModel.userRoles" class="ng-scope">
<span class="ng-binding">Wholesalers <em class="fa fa-close" data-toggle="modal" data-target="#deleteCustomerRole" data-ng-click="vm.ShowDeleteConfirmationForCustomerRole(customerRole.Id,customerRole.RoleType)"></em></span>
</div><!-- end ngRepeat: customerRole in vm.viewModel.userRoles -->
</div>
<select class="form-control ng-pristine ng-valid ng-touched" name="userRoles" ng-model="vm.viewModel.selectedRoleType" ng-options="role for role in vm.viewModel.roleTypes" ng-change="vm.addCustomerRole()"><option value="" class="" selected="selected">--- Select customer role ---</option><option label="Affiliate" value="string:Affiliate">Affiliate</option><option label="Designer" value="string:Designer">Designer</option><option label="ContestAdmin" value="string:ContestAdmin">ContestAdmin</option><option label="DesignAdmin" value="string:DesignAdmin">DesignAdmin</option><option label="Seller" value="string:Seller">Seller</option><option label="TemplateSeller" value="string:TemplateSeller">TemplateSeller</option></select>
</div>
Element Tried:
dropdown_CustomerRole = //*[#name='userRoles']
Driver.SetDropdownValue(dropdown_CustomerRole, "Seller");
firstly you need to import OpenQA.Selenium.Support.UI and after that here is how selects/dropdowns should be handled
// select the drop down list
// by xpath
IWebElement education = driver.FindElement(By.XPath("//*[#name='userRoles']"));
// by css
IWebElement education = driver.FindElement(By.CssSelector("select[name='userRoles']"));
//create select element object
SelectElement selectElement = new SelectElement(education);
//select by value
selectElement.SelectByValue("Seller");
// select by text
selectElement.SelectByText("Seller");
I am trying to create a textbox dynamically. I can successfully create it via the below code:
var parentTable = $('<table border="0" class="table table-bordered" width="100%" id="searchInformation"/>');
var tr = $("<tr class='searchEntitydata'/>");
var tr2 = $("<tr class='searchEntitydata1'/>");
tr.append("<td id='HQNametd'> <label ID='hqName'>HQ Name</label> <input type='textBox' id='textboxSearch' placeholder='Search HeadQuarter'> </td>");
tr.append("<td id='HQIDtd'> <label ID='hqId'>HQ ID</label> <input type='textBox' id='textboxSearchHQId' placeholder='Search ID'> </td>");
tr.append("<td id='BranchNametd'> <label ID='BranchName'>Branch Name</label> <input type='textBox' id='textboxSearchBranchName' placeholder='Search Branch Name'> </td>");
tr.append("<td id='BranchIdtd'> <label ID='BranchId'>Branch Id</label> <input type='textBox' id='textboxSearchBranchId' placeholder='Search Branch ID'> </td>");
tr2.append("<td id='Citytd'> <label ID='City'>City</label> <input type='textBox' id='textboxSearchBranchId' placeholder='Search Branch ID'> </td>");
tr2.append("<td id='Statetd'> <label ID='State'>State</label> <input type='textBox' id='textboxSearchBranchId' placeholder='Search Branch ID'> </td>");
parentTable.append(tr);
parentTable.append(tr2);
$('#confirmSearch').append(parentTable);
However, when I change the textbox type from input type=textBox
to asp:TextBox for using runat='server', I get an error.
Is there any way via which I can dynamically create a textbox with runat=server?
NO you cannot add asp-runat="server" tag from jQuery or any client side script. Rather use following to generate textbox dynamically from server side, encapsulate your code within ajax control toolkit update panel.
C#: (On click or page load or whatever server side event)
TextBox tbOne = new TextBox();
Label lblOne = new Label();
lblOne.ID = "lblId";
lblOne.Text = "My label";
lblOne.Width = 200;
tbOne.ID = "tbId";
tbOne.Text = "xyz";
pnl.Controls.Add(lblOne);
pnl.Controls.Add(tbOne);
ASPX:
<asp:Panel ID="pnl"Width="100%" runat="server">
</asp:Panel>
I'm using HtmlAgilityPack in one of my C# Projects for scraping. I need to scrap the <form> tag from web page. I've searched about how to extract form tag using HtmlAgilityPack but couldn't find an answer. Can anyone tell me how to extract <form> tag using HtmlAgilityPack?
private void Testing()
{
var getHtmlWeb = new HtmlWeb();
var document = getHtmlWeb.Load(#"http://localhost/final_project/index.php");
HtmlNode.ElementsFlags.Remove("form");
var aTags = document.DocumentNode.SelectNodes("//form");
int counter = 1;
StringBuilder buffer = new StringBuilder();
if (aTags != null)
{
foreach (var aTag in aTags)
{
buffer.Append(counter + ". " + aTag.InnerHtml + " - " + "\t" + "<br />");
counter++;
}
}
}
Here is my code sample. I'm scraping a page from my localhost. count of aTags is 1 because there is only one form on page. But when I use but my StringBuilder object doesn't contain any InnerHtml of form. Where's is the error :(
Here is my html source from which I want to scrap form
<!DOCTYPE html>
<html>
<head>
<!-- stylesheet section -->
<link rel="stylesheet" type="text/css" media="all" href="./_include/style.css">
<!-- title of the page -->
<title>Login</title>
<!-- PHP Section -->
<!-- Creating a connection with database-->
<!-- end of PHP Sectoin -->
</head>
<body>
<!-- now we'll check error variable to print warning -->
<!-- we'll submit the data to the same page to avoid excessive pages -->
<form action="/final_project/index.php" method="post">
<!-- ============================== Fieldset 1 ============================== -->
<fieldset>
<legend>Log in credentials:</legend>
<hr class="hrzntlrow" />
<label for="input-one"><strong>User Name:</strong></label><br />
<input autofocus name="userName" type="text" size="20" id="input-one" class="text" placeholder="User Name" required /><br />
<label for="input-two"><strong>Password:</strong></label><br />
<input name="password" type="password" size="20" id="input-two" class="text" placeholder="Password" required />
</fieldset>
<!-- ============================== Fieldset 1 end ============================== -->
<p><input type="submit" alt="SUBMIT" name="submit" value="SUBMIT" class="submit-text" /></p>
</form>
</body>
</html>
Since form tags are allowed to overlap , HAP handles them differently, to treat form tags as any other element just remove the form flag by calling:
HtmlAgilityPack.HtmlNode.ElementsFlags.Remove("form");
Now your form tags will be handled as you expect, and you can work with the way you work with other tags.
I have a asp.net mvc application with razor engine.
In a view Home i have this snippet:
<section id="form_admin">
<form action="/Super/Manipuler" method="post">
<fieldset>
<legend>Formulaire d'ajout d'un administrateur</legend>
#Html.Label("Login")
#Html.Label("Mail")
#Html.Label("Password")
#Html.Label("Name")
<br />
<br />
#if(Model != null){
foreach (Upload.Models.AdminModels admin in Model)
{
if (i == 0){
<input type="radio" checked class="radio" name="radio" value="#admin.Login" >
}
else{
<input type="radio" class="radio" name="radio" value="#admin.Login" style="margin-left:0.3px;">
}
<label id="log">#admin.Login</label>
<label id="logm">#admin.Mail</label>
<label id="logp">#admin.Password</label>
<label id="logn">#admin.Name</label>
<br />
i++;
}
}
<br />
<input type="submit" value="Editer" name="submit_button"/>
<input type="submit" value="Supprimer" name="submit_button" />
Créer un nouveau compte
</fieldset>
</form>
</section>
In the controller : the action Manipuler is the below:
public ActionResult Manipuler()
{
string buttonName = Request.Form["submit_button"];
string _login = Request.Params["radio"];
Upload.Models.AdminModels admin = new AdminModels();
Upload.Models.CompteModels.Modifiying_login = _login;
if (buttonName == "Editer") { return RedirectToAction("Edit", "Admin"); }
else { admin.Delete_admin(_login); return RedirectToAction("Home", "Super"); }
}
It's works fine but i'd like to change the radiobox to checkbox.
My question is how to know all checked box in the collection of checkbox in the action Manipuler ?
Take a look at Phil Haack's article on model binding a checkbox list. Basically, you just need to set up the HTML in a specific way (name your checkboxes the same which will then convert the various POSTed values into a list).
http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx