Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Ajax.BeginForm Обновить содержимое формы

Привет всем.
Недавно стал использовать Ajax.BeginForm в свое проекте asp.net mvc 5.
Вроде разобрался, но не совсем
Сделал кнопку, данные в бд отправляются все отлично, но статус(название кнопки) не магу поменять

@using (Ajax.BeginForm("SubscribeCreateDelete", "ShoppingView", new AjaxOptions { UpdateTargetId = "btnStatus", InsertionMode = InsertionMode.Replace }))
                {      
                        @Html.Hidden("WhoSubscribe", us.GetUserIdByLogin(User.Identity.Name))
                        @Html.Hidden("OnSubscribe", (int)Model.UserId)
    <div id="btnStatus">
        @{
                    LookGid.Data.forSubscribes.workSubscribes wsb = new LookGid.Data.forSubscribes.workSubscribes();
                    bool checkSubs = wsb.CheckSubs(us.GetUserIdByLogin(User.Identity.Name), (int)Model.UserId);
        }
        @if (checkSubs == false)
        {
        <button type="submit" class="btn btn-primary btn-md" id="btnSubs"
                style="background-color: black; border-color: black; font-weight: bold; width: 140px; height: 25px; padding:0px;">
            Подписаться
        </button>
        }
        @if (checkSubs == true)
        {
            <button type="submit" class="btn btn-primary btn-md" id="btnSubs"
                    style="background-color: black; border-color: black; font-weight: bold; width: 140px; height: 25px; padding:0px;">
                Отписаться
            </button>
        }
    </div>
                }



Подскажите что делаю не так, как сделать чтобы работало?
UpdateTargetId = "btnStatus" - установлен, все как положено.
Может другой подход использовать к решению это задачи?
Спасибо.
Ответ: Ура, заработало.
во первых у меня не тот метод принимал данные с формы, нужно было их сразу кидать в Партиал
во вторых ошибка с переменной, сейчас исправляю

Спасибо большое, очень помогли, бывает вот так запаришься и не видишь очевидных вещей)))
Вопрос: Ajax.BeginForm ответ получен - но не обновляет форму

Привет всем!

на странице друг над другом располагаются контейнеры <div>, их n-количество
 <div id="@Model.Id" class="row" style="margin-left: 0px;margin-right: 0px;">
 <img id="@data.Id" src="@data.Path/@data.Folder/@data.OriginalName" alt="Загрузка изображения"  />
 @Html.Partial("AddCollectionPartial", Model)
</div>



Сам Partial имеет следующий код
<div id="CollectionBtnStatus_@Model.Id">
 <button class="btn btn -primary btn-md" id="@Model.Id" onclick="getModelId(this)" data-toggle="modal" data-target="#myModalInAlbum" style="background-color: #f5f5f5; border-color: #f5f5f5; font-weight: normal; color: #666;">
       В Коллекцию
  </button>
</div>




кнопка <button>В Коллекцию </button>
вызывает модальное окно
<!-- Modal -->
<div class="modal fade" id="myModalInAlbum" tabindex="-1" role="dialog" aria-labelledby="myModalLabelInAlbum" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content visible-lg">
            @using (Ajax.BeginForm("AddCollectionPartial", "Home", new AjaxOptions { UpdateTargetId = "CollectionBtnStatus_22", InsertionMode = InsertionMode.Replace }, new { @class = "form-horizontal", id = "popupCollection" }))
            { <div class="modal-body" id="dialog-modal" style="padding-bottom: 0px !important;">
                <div style="padding-bottom: 10px;">
                    <div style="font-size: 15px; color: white; background-color: #222222;" class="text-center">Добавить в Коллекцию</div>
                </div>
                <div class="form-group">
                    <div class="col-sm-12">
                        @Html.TextBox("listCollectionpop", null, new { @class = "form-control clistCollectionpop", @style = "float:left;margin-top:10px;", placeholder = "Выберите Альбом" })
                        @Html.Hidden("hidlistCollectionId")
                        @Html.Hidden("IdShoppingOnPopUp")
                        <input type="text" id="txt_name" />
                    </div>
                </div>
            </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Отмена</button>
                    <button type="submit" id="saveCollection" class="btn btn-primary">Ок</button>
                </div>
            }
        </div>
    </div>
</div>
<!-- /.modal -->



в форме Ajax.BeginForm этого окна UpdateTargetId = "CollectionBtnStatus_22" при вызове его изменяется на id дива который нужно обновить
(CollectionBtnStatus_21 или CollectionBtnStatus_20 и тд)
<script type="text/javascript">
    function getModelId(el) {
        $('#IdShoppingOnPopUp').val(el.id);
        var nameTargetId = "CollectionBtnStatus_" + el.id;
        $('#popupCollection').attr('data-ajax-update', nameTargetId);
        $('#txt_name').val(nameTargetId);
    }
</script>



нажимаю отправить, данные в аккурат ложатся в бд все отлично.

далее ответ от сервера сморю в fireBug
 <div id="CollectionBtnStatus_22">
<form action="/Home/AddCollectionPartial" data-ajax="true" data-ajax-mode="replace" data-ajax-update
="#CollectionBtnStatus_22" id="form0" method="post"><input id="hidlistCollectionId" name="hidlistCollectionId"
 type="hidden" value="3" /><input id="IdShoppingOnPopUp" name="IdShoppingOnPopUp" type="hidden" value
="22" />                <button class="btn btn-primary btn-md" id="btnInAlbom" onclick="return confirmDeleteAlbum
();">
                    из Коллекции
                </button>
</form>
</div>


ответ получаю, но сам <div id="CollectionBtnStatus_22"> остается не обновленным.....

если жестко задаю UpdateTargetId = "CollectionBtnStatus_22" - то обновление происходит, все работает супер
а если подменяю динамически джаваскриптом то не работает...
Подскажите куда копать, где смотреть? уже долго сижу над этой проблемой((((
Ответ: Relic Hunter,
Да, id нужно javscript'ом обновлять до вызова Ajax метода.
Вопрос: Ajax.BeginForm динамически менять UpdateTargetId

на странице может располагаться множество элементов div c id="CollectionBtnStatus_@Model.Id"
Model.Id - уникальный префикс от 1 до бесконечности.
то есть каждый элементов div имеет уникальный id
на каждом div есть кнопка, по клику на которую она делает видимой форму
есть только одна форма !
 @using (Ajax.BeginForm("AddCollectionPartial", "Home", new AjaxOptions { UpdateTargetId = "CollectionBtnStatus_", InsertionMode = InsertionMode.Replace }, new { @class = "form-horizontal", id = "popupCollection" }))
            {}


форма невидимая и по клику на button становиться видимой
и в этот момент когда она становиться видимой мне нужно менять UpdateTargetId этой формы, на тот с какого div она была вызвана кнопкой.

я сделал следующим образом, повесил jquery событие на клик кнопки
<button class="btn btn -primary btn-md" id="@Model.Id" onclick="getModelId(this)" data-toggle="modal" data-target="#myModalInAlbum" style="background-color: #f5f5f5; border-color: #f5f5f5; font-weight: normal; color: #666;">
                В Коллекцию
            </button>


и попытался подменить UpdateTargetId у Ajax.BeginForm
<script type="text/javascript">
    function getModelId(el) {
        $('#IdShoppingOnPopUp').val(el.id);
        var nameTargetId = "CollectionBtnStatus_" + el.id;
        $('#popupCollection').attr('data-ajax-update', nameTargetId);
    }
</script>


но по каким-то причинам div не обновляется....
подскажите как правильно менять UpdateTargetId в уже сформированной странице у Ajax.BeginForm
Ответ:
yardie
а если открыть код всей страницы - его нет.
так и должно быть, показывается изначальный код загруженной страницы, динамические изменения в нем не отражаются

yardie
да все обновляется. если первоначально задаю нужные мне значения все работает без нареканий!
Сравнивайте добуквенно запрос к серверу и ответ от сервера

ну или смотрите вариант 2. Удаленно отлаживать тяжеловато ))
Вопрос: Ajax.BeginForm polling

доброго времени суток !
во вьюшке написал код :
using (Ajax.BeginForm("getCountTasks", "TaskController",
    new AjaxOptions { UpdateTargetId = "countTabledata", Url = Url.Action("getCountTasks") }, new {id = "form" }))
{
    <div id="countTabledata">
        @Html.Action("getCountTasks")
    </div>
   
    <script type="text/javascript">
    var form = document.getElementById("form");
    setTimeout("form.submit()", 5000);
    </script>


как сделать правильно опрос ? что бы каждые 5 секунд дергать метод getCountTasks. Плохо знаю javascript, прогуглил но там варианты для обычной формы. не могу найти примеры с ajax.beginform.
Буду благодарен за ответы и помощь, коллеги!
Ответ:
rebelmind
skyANA,
Да, например, много контролов и нужно оповещать юзера, что осталось еще заполнить, выбрать и тд.
По таймеру такое не делают.

Обычно подсвечивают поля, что заполнены некорректно и по мере ввода перепроверяют.
Вопрос: Ajax.BeginForm вывод нормального Json

Javascript
1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
    function something(data) {
        alert('1');
    }
</script>
 
@using (Ajax.BeginForm("Detail_Create", "Product", new AjaxOptions { OnSuccess = "something" }, new { enctype = "multipart/form-data" }))
{
...
}
C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
[HttpPost]
        public ActionResult Detail_Create(DetailModel model, IEnumerable<HttpPostedFileBase> files)
        {
            string error = string.Empty;
            if (ModelState.IsValid)
            {
....
                        ModelState.AddModelError(String.Empty, "Errors");
            }
            IEnumerable<System.Web.Mvc.ModelError> modelerrors = ModelState.SelectMany(r => r.Value.Errors);
            foreach (var modelerror in modelerrors)
            {
                error += "•   " + modelerror.ErrorMessage + "<br>";
            }
            return Json(new { success = false, responseText = error });
        }

Как сделать так что-бы при нажатии "OK" ошибки представлялись не в таком виде, а div в который я выведу...
Т.е. страница не обновлялась, оставалась та информация которая была введена и по окончанию работы ajax он заходил в something, а там я уже буду проверять, если есть ошибки, то выведу, в ином случае закрою форму (это у меня модальное окно).
Что то типо этого:

Заранее спасибо.
Ответ:
Сообщение от Vla00
Как сделать так что-бы при нажатии "OK" ошибки представлялись не в таком виде,а div в который я выведу
У вас Ajax.BeginForm не отрабатывает асинхронно. - это раз.
Сообщение от Vla00
а div в который я выведу...
Используйте jquery (ну либо средствами самого js):
Javascript
1
2
3
4
function something(data) {
       if (!data.success)
        $("#myDivId").html(decodeURIComponent(data.responseText));
    }
Вопрос: График не отображается в Ajax.BeginForm()

Есть следующий график от гугла. Вот Контроллер
C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
public class ChartController : Controller
    {
 public JsonResult CreateChart()
        {
            var result = new List<PieChartItem>();
            result.Add(new PieChartItem { Name = "Ukraine", Value = 5 });
            result.Add(new PieChartItem { Name = "Russia", Value = 6 });
            result.Add(new PieChartItem { Name = "Belarus", Value = 6 });
            result.Add(new PieChartItem { Name = "USA", Value = 4 });
            return Json(new { Countries = result }, JsonRequestBehavior.AllowGet);
        }
    }
    public class PieChartItem
    {
        public string Name { get; set; }
        public int Value { get; set; }
    }
и представление
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
     // Подгружаем API
      google.load('visualization', '1.0', { 'packages': ['corechart'] });
        // Устанавливаем callback
        google.setOnLoadCallback(drawChart);
       function drawChart() {
             var options = {
             'title': 'Blog Visitors',
              'width': 400,
               'height': 300
           };
         var data = new google.visualization.DataTable();
           data.addColumn('string', 'Country');
          data.addColumn('number', 'Slices');
 
            $.getJSON('@Url.Action("CreateChart", "Chart")', null,
                                                        function (result) {
               if (result.Countries.length) {
                 $.each(result.Countries, function (index, c) {
                     data.addRow(
                         [c.Name, c.Value]
                      );
                    });
                 // Отрисовка диаграммы
                   var chart = new google.visualization.PieChart(
                                        document.getElementById('n'));
                  chart.draw(data, options);
               };
          });
       }
</script>
<div id="n"></div>
Мне необходимо сделать так, чтобы такой график отображался, когда я нажимаю на кнопку. С помощью Ajax.BeginForm добиться результата не удалось. Вот мои попытки
HTML5
1
2
3
4
@using (Ajax.BeginForm("CreateChart", "Chart", 
                  new AjaxOptions()
                  {
                  }))
Пытался так же сделать через jquery и результат тоже не оправдал ожиданий.
Javascript
1
2
3
4
5
6
7
8
<script type="text/javascript">
    $(document).ready(function () {
        $('#submit').click(function (e) {
            e.preventDefault();
            $('#n').load('@Url.Action("CreateChart", "Chart")')
        });
    });
      </script>
Теперь вот уже и не знаю что сделать, чтобы график отображался после нажатия на кнопку. Буду благодарен за помощь.
Ответ:
HTML5
1
2
3
4
5
<div>
    <input type="submit" id="getChart" value="Загрузить график"/>
    <div id="chartsPlace">
    </div>
</div>
Только надписи сбоку и title почему-то не отображаются.
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
@section scripts {
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        
        if (google) {
            google.load('visualization', '1.0', {
                packages: ['corechart'],
                callback: function() {
                    // do stuff, if you wan't - it doesn't matter, because the page isn't blank!
                    prepareUI();
                }
            });
        }
 
        function prepareUI() {
            $("#getChart").click(function(event) {
                event.preventDefault();
                $.ajax({
                    url: '/Home/CreateChart',
                    type: "get"
                }).done(function(data) {
                    drawChart("chartsPlace", data);
                }).fail(function(error, status, xhr) {console.log(error)});
            });
        }
 
 
        function drawChart(elemId, chartData) {
            var options = {
                'title': 'Blog Visitors',
                'width': 400,
                'height': 300
            };
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Topping');
            data.addColumn('number', 'Slices');
            if (chartData.Countries.length) {
                $.each(chartData.Countries, function(index, c) {
                    data.addRow(
                        [c.Name, c.Value]
                    );
                });
                // Отрисовка диаграммы
                var chart = new google.visualization.PieChart(document.getElementById(elemId));
                chart.draw(data, options);
            };
        }
    </script>
}
Вопрос: Ajax отправка данных из формы в базу mysql и вывод из базы mysql

Код Java(TM) 2 Platform Standard Edition 5.0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
$(function()
{
    $('#chat_submit').click(function(e)
    {
        e.preventDefault();
        var chat_name = $.trim($('#chat_name').val());
        var chat_textarea = $.trim($('#chat_textarea').val());
        var status = true
 
        if(chat_name == '')
        {
            $('#Modal_chat_name_errors_jQuery').html('Введите своё имя !');
            $('#Modal_chat_name_errors').show();
            status = false
        }
        if(chat_textarea == '')
        {
            $('#Modal_chat_textarea_errors_jQuery').html('Введите текст сообщения !');
            $('#Modal_chat_textarea_errors').show();
            status = false
        }
        if(status)
        {
            //сдесь либо ajax запрос, или отправка формы
            //при клике на кнопку
            $("#chat_submit").click(function()
            {
                //отправляем ( куда , что (имя / значение) , получаем ответ)
                 $.post('save_chat.php', { chat_name: $("#chat_name").val() , chat_textarea: $("#chat_textarea").val() } , function(data)
                 {
                     //ответ заносим в див
                     $('#result_chat').html(data);
                 });
            });
 
        }
        
    });
    $('.Modal_chat_name_errors_close').click(function()
    {
        $(this).parent().hide();
    })
    $('.Modal_chat_textarea_errors_close').click(function()
    {
        $(this).parent().hide();
    })
});
отправляем сюда
Код PHPHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
//заносим введенный пользователем chat_name в переменную $chat_name
$chat_name = $_POST['chat_name'];
 
//заносим введенный пользователем chat_textarea в переменную $chat_textarea
$chat_textarea = $_POST['chat_textarea'];
 
// подключаемся к базе
include ("bd.php");
 
// сохраняем данные
mysql_query ("INSERT INTO chat (chat_name,chat_textarea) VALUES ('$chat_name','$chat_textarea')");
 
?>
вывод из базы mysql видимо должен попасть сюда

Код HTML5
1
<div id="result_chat"></div>

1) не могу понять, почему у меня в базе после одной отправки данных формы, появляется несколько записей одинаковых семь, восемь, четыре, зависит от объёма чем больше тем меньше почему ?

2) [QUOTE]вывод из базы mysql видимо должен попасть сюда

Код HTML5
1
<div id="result_chat"></div>
QUOTE] не попадает ?

Добавлено через 4 часа 42 минуты
1) не могу понять, почему у меня в базе после одной отправки данных формы, появляется несколько записей одинаковых семь, восемь, четыре, зависит от объёма чем больше тем меньше почему ?
С этим разобрался
Ответ: Спасибо
Вопрос: Как можно распечатать содержимое формы?

Привет всем, как можно распечатать содержимое формы.Возможно ли распечатать скрин формы?
Ответ: Примеров в поиске полно
Практическое руководство. Печать формы Windows Forms
Вопрос: Вывести на печать содержимое формы

как вывести на печать содержимое формы?
Ответ: еще вариант распечатки - больше нравится даже:
на форму с графиком добавляем "PrintDocument"
в элементе "PrintDocument" - запускаем Свойство исполнения "PrintPage" и пишем следующий код:
vb.net
1
2
3
4
5
6
7
8
9
10
11
12
    'кнопка на форме "Печать"
    Private Sub ToolStripMenuItem2_Click(sender As System.Object, e As System.EventArgs) Handles ToolStripMenuItem2.Click
        grafik.Printing.PrintDocument = PrintDocument1
        ' присваиваем альбомный вид листа
        grafik.Printing.PrintDocument.DefaultPageSettings.Landscape = True
        grafik.Printing.Print(True)
    End Sub
    
    Private Sub PrintDocument1_PrintPage(sender As System.Object, e As System.Drawing.Printing.PrintPageEventArgs) Handles PrintDocument1.PrintPage
        ' рисуем прямоугльник в который попадает график
        grafik.Printing.PrintPaint(e.Graphics, New Rectangle(0, 0, grafik.Width, grafik.Height))
    End Sub
grafik - название компонента chart
Вопрос: Ajax onchange. Заменяет страницу полностью

Ajax.BeginForm заменяет целую страницу OnChange из DropDownList.
Хотя, если использовать просто <input submit> без onchange все работает нормально. Заменяет div.

C#
1
2
3
4
@using (Ajax.BeginForm("Index", "Home", new AjaxOptions { UpdateTargetId = "result" }))
{
    @Html.DropDownList("SortItems", null, new { onchange = "this.form.submit()" })
}
Ответ:
Сообщение от Cheburnat
Ajax.BeginForm заменяет целую страницу OnChange из DropDownList.
Хотя, если использовать просто <input submit> без onchange все работает нормально. Заменяет div.
Ajax.BeginForm сводится к использованию скрипта unobtrusiveAjax.js
- данный скрипт назначает обработчик для события onchange , а Вы своим кодом переопределяете его на свой обработчик , который просто отправляет форму , вместо того , что бы задействовать XmlHttpRequest