Как я могу отключить обновление страницы ajax call?

Question

Я использую загрузку изображений в своем проекте.Когда я нажимаю кнопку загрузки и выбираю файл.Я показываю изображения в вызове ajax с HTML-кодом, но после этого моя страница обновляется, и в результате все данные формы остаются пустыми.

Я также пытался использовать e.preventDefault, но это не решило проблему.

Мой вызов ajax, получение изображений и разбиение.

'. ClsDosyalar' - это мое текстовое поле, и я пишу здесь имя изображения.

JavaScript

   <script>
              $(document).ready(function () {
                    $("#files").on("change", function (e) {
                        var formData = new FormData();
                        var totalFiles = document.getElementById("files").files.length;
                        for (var i = 0; i < totalFiles; i++) {
                            var file = document.getElementById("files").files[i];
                            alert(file.name);
                            formData.append("files", file);
                        }

             $.ajax({
                type: "POST",
                url: '/haber/upload',
                data: formData,
                dataType: 'json',
                contentType: false,
                processData: false,
                success: function (response) {
                    if (response.Durum == "1") {
                    if (response.Dosyalar != "") {
                        var res = response.Dosyalar.split(",");

                        if ($('.clsDosyalar').val() == "") {
                            $('.clsDosyalar').val(response.Dosyalar);
                        }

                        else {
                            $('.clsDosyalar').val($('.clsDosyalar').val() + "," + response.Dosyalar);
                        }

                        for (var dlist = 0; dlist < res.length; dlist++) {

                            $("<span class=\"pip\" id=\"pip" + res[dlist] + "\">" +
                              "<img class=\"imageThumb\" src=\"" + "../../Uploads/" + res[dlist] + "\" title=\"" + res[dlist] + "\"/>" +
                              "<br/><span class=\"remove\" id=\"" + res[dlist] + "\">Fotoğrafı Sil</span><span class=\"gorunurfoto\" id=\"" + res[dlist] + "\">Görünür Fotoğraf</span>" + res[dlist].filename +
                              "</span>").insertAfter("#files");
                        }

                    }

                },
                error: function (error) {
                    alert("Hata");
                }
            });
        });
    });

        </script>

HTML

@using (Html.BeginForm("Yeni", "Haberler", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
  <div class="col-lg-9">
    @Html.TextBoxFor(model => model.HaberImage, "", new { @class = "clsDosyalar form-control" })
    </div>
<input type="file" id="files" name="postedFiles" multiple />
 <input type="submit" value="Ekle" class="btn btn-success" id="btnEkle" />
}

Контроллер

Я отправляю имена выбранных изображений JsonResult.

 [Route("haber/upload")]
    public JsonResult Upload()
    {
        int Durum = 0;
        string strFileNames = "";
        try
        {
            for (int i = 0; i < Request.Files.Count; i++)
            {
                var file = Request.Files[i];

                var fileName = DateTime.Now.Ticks.ToString() + Path.GetExtension(file.FileName);

                var path = Path.Combine(Server.MapPath("~/Uploads/"), fileName);
                file.SaveAs(path);

                strFileNames += fileName + ",";
            }

            Durum = 1;

        }

        catch
        {
            Durum = 0;
        }

        if (strFileNames != "")
        {
            strFileNames = strFileNames.Substring(0, strFileNames.Length - 1);
        }



        return Json(new { Durum = Durum, Dosyalar = strFileNames });
    }

My ActionResults;

 [HttpGet]
        [Route("panel/haberekle")]
        public ActionResult Yeni()
        {
            return View();
        }

        [HttpPost]
        [Route("panel/haberekle")]
        public ActionResult Yeni(Haberler haberModel)
        {

            Haberler haber = new Haberler();


            haber.HaberImage = haberModel.HaberImage;
            haber.Baslik = haberModel.Baslik;
            haber.Icerik = HttpUtility.HtmlEncode(haberModel.Icerik);
            haber.Tarih = haberModel.Tarih;
            haber.BitisTarihi = haberModel.BitisTarihi;
            haber.AktifMi = haberModel.AktifMi;
            haber.SilindiMi = haberModel.SilindiMi;
            haber.GorunecekImage = haberModel.GorunecekImage;

            using (dbContext = DbContext())
            {
                dbContext.Haberler.Add(haber);
                dbContext.SaveChanges();
            }

            return RedirectToAction("Listele", "Haberler");
        }

Ссылка на решение;

Обновление в браузере при загрузке файла MVC c #

Answer 1

Вы можете вручную отправить свою форму, сделав кнопку отправки для type="button"

Поместите действие отправки в функцию щелчка

$('#myButton').on('click',function(){ 
   $(this).closest('form').submit(); 
});