Переключение переключателя с On на Off или Off на On с использованием if else

ProgramBox

Переключение переключателя с On на Off или Off на On с использованием if else

Post author:admin
Запись опубликована:19 февраля, 2023
Post category:Вопросы по программированию

#javascript #jquery #twitter-bootstrap #asp.net-mvc-5

Вопрос:

Я работаю над asp.net MVC 5. Я разместил кнопку переключения начальной загрузки, имеющую input type checkbox

Ниже приведен образ моего переключателя

Из моего запроса я получаю имя команды cmd_Name , в котором есть значение On или Off, и на основе этого значения я просто хочу изменить переключатель с On-Off или с Off-On

Ниже приведен мой синтаксис razor для переключения

 @using (Html.BeginForm())
{
//var cmd_Name = Session["cmd_Name"];
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)

<fieldset style="height:60px">
    <legend style="text-align:center;  font-size:large; font-family:'Times New Roman'; background-color:#C8E6C9; color:red">Remote On/Off</legend>
    <input id="test_id" name="cmdName" type="checkbox" checked data-toggle="toggle">

</fieldset>}

Ниже приведен мой сценарий для переключения

 <script type="text/javascript">
var search = '@Session["search"]';
var cmd_Name = '@Session["cmd_Name"]';
var data = {}
//alert(cmd_Name);
$(window).on('load', function () {

    // here cmd_Name i having On or Off value 

    // i want to put a check like bellow

    if(cmd_Name == "On")
    {
      // then the toggle switch (checkbox) moves to On
     // what should place here that moves the switch from on to off and vise versa
    }
    else
    {
      //then toggle switch (checkbox) moves to Off
    }

})</script>

Обновленный код

Ниже приведено изображение моего обновленного кода и ошибки

Обновленный код 2

У меня есть следующие объявления в моем head разделе в layout

 <head>
<title>@ViewBag.Title</title>
@*All the javascript and css files that are required by the
    application can be referenced here so that there is no
    need to refrence them in each and every view*@


<script type="text/javascript" src="~/Scripts/jquery-3.1.0.min.js"></script>
<script src="~/Scripts/bootstrap-toggle.js"></script>
<link href="~/Content/bootstrap-toggle.css" rel="stylesheet" />
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />    
<link href="~/Content/DataTables/css/jquery.dataTables.min.css" rel="stylesheet" />
<script type="text/javascript" src="~/Scripts/DataTables/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap.min.js"></script>
<script src="http://maps.google.com/maps/api/js?key=MyKey"></script>


<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="icon" href="favicon.ico" type="image/ico" />
<link rel="shortcut icon" href="~/favicon.ico" /></head>

См. bundle.config

 bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

Я пробовал много вещей, if...else подобных $("#test_id").checked = true/false тому, что я пробовал document.getElementById("test_id").checked

Но все напрасно, любая помощь будет оценена

1. Итак, в чем собственно проблема? data не меняется? AJAX не отправляется? Вы уверены, что bootstrap отобразит флажок так, как вы его написали, т. Е. #test_id Присутствует в отображаемом исходном коде?

2. @Teemu событие .on («change») работает только тогда, когда переключатель переключается с On на Off или Off на On, а затем в ajax он передает данные и выполняет поиск (серийный номер), а в контроллере я разместил запрос insert, и он вставляет данные в базу данных

3. @Teemu затем помещается запрос на выборку, из которого я выполнил имя команды (cmd_Name), а затем сохранил в переменной сеанса, а затем передал эту переменную в моем JavaScript. Здесь я просто хочу изменить значение имени команды на основе переключателя

4. @Teemu пожалуйста, ознакомьтесь с частью if ..else сразу после загрузки окна

5. Все еще немного неясно, о чем вы спрашиваете. window.onload предполагается, что он выполняется только один раз. Если вы хотите изменить значение cmd_Name , вы должны сделать это в onchange обработчике или в обратном AJAX вызове call, как cmd_Name глобальном. Обратите внимание, что все, что вы говорите, что пробовали, относится к #test_id , а не к cmd_Name , и теперь кажется, что проблема в cmd_Name с. Вот почему вопрос такой запутанный.

Ответ №1:

Попробуйте это —

 if(cmd_Name == "On") {
    $("#test_id").attr("checked", "checked");
} else if(cmd_Name == "Off") {
   $("#test_id").removeAttr("checked");
}

Вы также можете сделать это таким образом

 if(cmd_Name == "On") {
    $("#test_id").bootstrapToggle("on")
} else if(cmd_Name == "Off") {
   $("#test_id").bootstrapToggle("off")
}

1. Для обоих я получаю одну и ту же ошибку error CS0103: The name '$' does not exist in the current context

2. Это означает, что вам нужно добавить ссылку на jquery

3. jquery находится в моем макете, а код переключения находится в моем частичном представлении

4. Ошибка, которую вы получили, возникает, если вы не включили jquery или выполняете свой код до его загрузки. Также убедитесь, что вы не загружаете jquery дважды

5. Итак, что делать в этом случае? Я не могу добавить ссылку jquey в свой частичный вид, поскольку это приведет к конфликту со ссылкой в макете