This is a migrated thread and some comments may be shown as answers.

Form Values - Not Getting Added to QueryString in Chrome, Firefox and Safari

3 Answers 61 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Allan
Top achievements
Rank 1
Allan asked on 04 Feb 2013, 05:31 PM
In IE, the form value selections are being passed to the controller, but they are not passed in any other browser that I have tried. Why do my form values get used in IE but not in Chrome, Firefox or Safari?
 
My code is below:
 
HomeController.cs:
using KendoFilters.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
 
namespace KendoFilters.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index(string nameDD)
        {
            var listFruits = new List<Fruit>
            {
                new Fruit { Name="Apple", Organic=true },
                new Fruit { Name="Orange", Organic=true },
                new Fruit { Name="Pear", Organic=true },
                new Fruit { Name="Plum", Organic=false }
            };
 
            ViewBag.MyNameDDValue = nameDD;
 
            return View(listFruits);
        }
    }
}
Index.cshtml:
@model IEnumerable<KendoFilters.Models.Fruit>
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <!-- Kendo References -->
    <link rel="stylesheet" href="~/Content/kendo.common.min.css">
    <link rel="stylesheet" href="~/Content/kendo.default.min.css">
    <link href="~/Content/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
    <script src="~/Scripts/jquery.min.js"></script>
    <script src="~/Scripts/kendo.all.min.js"></script>
    <script src="~/Scripts/kendo.aspnetmvc.min.js"></script>
</head>
<body>
    <div>
        <table>
            @using (Html.BeginForm("Index", "Home", FormMethod.Get))
            {
                <tr>
                    <td>Environment
                    </td>
                    <td>
                        @(Html.Kendo().DropDownList()
                    .Name("nameDD")
                    .DataTextField("Name")
                    .DataValueField("Name")
                    .BindTo(Model)
                    )
                    </td>
                    <td style="width: 10px;"></td>
                    <td>
                        <input type="submit" value="Run Report" />
                    </td>
                </tr>
        }
        </table>
        <br /><br />
        You Chose: @ViewBag.MyNameDDValue
    </div>
</body>
</html>


3 Answers, 1 is accepted

Sort by
0
Allan
Top achievements
Rank 1
answered on 05 Feb 2013, 01:56 PM
Is anyone looking into this bug? Are you able to recreate it on your end?
0
Accepted
Petur Subev
Telerik team
answered on 06 Feb 2013, 11:40 AM
Hello Allan,

This is because of invalid html.
A form is not allowed to be a child element of a table, tbody or tr.

Similar question is asked here.
Kind Regards,
Petur Subev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Allan
Top achievements
Rank 1
answered on 06 Feb 2013, 02:24 PM

I really appreciate your help.

Here is the working code:

@model LatencyApp.Models.ChartsViewModel
 
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Latency Application</title>
 
    <!-- Kendo References -->
    <link rel="stylesheet" href="~/Content/kendo.common.min.css">
    <link rel="stylesheet" href="~/Content/kendo.blueopal.min.css">
    <link rel="stylesheet" href="~/Content/kendo.dataviz.min.css" type="text/css" />
    <script src="~/Scripts/jquery.min.js"></script>
    <script src="~/Scripts/kendo.all.min.js"></script>
    <script src="~/Scripts/kendo.aspnetmvc.min.js"></script>
 
</head>
<body>
    <div>
        <h2>Bentley Systems - Application Latency</h2>
 
 
        @using (Html.BeginForm("Index", "Home", FormMethod.Get))
        {
        @* Filters Begin Here *@
        <table>
 
            <tr>
                <td>
                    Environment:
                </td>
                <td>
                    @(Html.Kendo().DropDownList()
                    .Name("envDD")
                    .DataTextField("LoginEnvName")
                    .DataValueField("LoginEnvironmentID")
                    .BindTo(Model.EnvForDD)
                    .HtmlAttributes(new { style = "width: 100px;" })
                    )
                </td>
                <td style="width:10px">
 
                </td>
                <td>
                    Region:
                </td>
                <td>
                    @(Html.Kendo().DropDownList()
                    .Name("locDD")
                    .DataTextField("LoginLocName")
                    .DataValueField("LoginLocationID")
                    .BindTo(Model.LocForDD)
                    .HtmlAttributes(new { style = "width: 100px;" })
                    )
                </td>
                <td style="width:10px">
 
                </td>
                <td>
                    Frequency:
                </td>
                <td>
                    @(Html.Kendo().DropDownList()
                    .Name("freDD")
                    .DataTextField("FrequencyName")
                    .DataValueField("FrequencyID")
                    .BindTo(Model.FreForDD)
                    .HtmlAttributes(new { style = "width: 100px;" })
                    )
                </td>
                <td style="width:10px">
 
                </td>
                <td style="white-space:nowrap;">
                    Date Range:
                    @(Html.Kendo().DateTimePicker()
                    .Name("startDate")
                    .HtmlAttributes(new { style = "width: 210px;" })
                    .Value(DateTime.Today.AddDays(-7))
                    .Max(DateTime.Today)
                    .ParseFormats(new string[] { "MM/dd/yyyy" })
                    .Events(e => e.Change("startChange"))
                    )
                        -
                    @(Html.Kendo().DateTimePicker()
                    .Name("endDate")
                    .HtmlAttributes(new { style = "width: 210px;" })
                    .Value(DateTime.Today)
                    .Min(DateTime.Today.AddDays(-7))
                    .ParseFormats(new string[] { "MM/dd/yyyy" })
                    .Events(e => e.Change("endChange"))
                    )
                </td>
                <td style="width:10px;">
                     
                </td>
                <td>
                    <input type="submit" value="Run Report" class="k-button" />
                </td>
            </tr>
 
        </table>
        @* Filters End Here *@
        }
 
 
        <br />
 
 
 
        @* Charts Begin Here *@
        <table style="padding: 0px; border-spacing: 20px;">
@{
    int colNum = 2;
    int chrtCount = 1;
    bool newRow = true;
    bool firstRow = true;
}       
 @foreach (var item in Model.AppsForChart)
 {
     if (chrtCount < colNum)
     {
         newRow = true;
     }
     else
     {
         newRow = false;
     }   
     if (firstRow || newRow)
     {
         @:<tr>
         firstRow = false;
     }
     <td>
     @Html.Partial("ChartPartial", item.LoginHistories,
                        new ViewDataDictionary{{"AppName", item.LoginAppName}})
     </td>
     if (chrtCount == colNum)
     {
         @:</tr>
         chrtCount = 1;
     }
     else
     {    
         chrtCount++;
     }
 }
 
             
        </table>
        @* Charts End Here *@
 
    </div>
</body>
</html>
 
 
<script>
    function startChange() {
        var endPicker = $("#endDate").data("kendoDateTimePicker"),
            startDate = this.value();
 
        if (startDate) {
            startDate = new Date(startDate);
            startDate.setDate(startDate.getDate() + 1);
            endPicker.min(startDate);
        }
    }
 
    function endChange() {
        var startPicker = $("#startDate").data("kendoDateTimePicker"),
            endDate = this.value();
 
        if (endDate) {
            endDate = new Date(endDate);
            endDate.setDate(endDate.getDate() - 1);
            startPicker.max(endDate);
        }
    }
</script>
Tags
DropDownList
Asked by
Allan
Top achievements
Rank 1
Answers by
Allan
Top achievements
Rank 1
Petur Subev
Telerik team
Share this question
or