Independence in Partial View used several times in the same View MVC4 asp.net

Question

Independence in Partial View used several times in the same View MVC4 asp.net

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

Hi, I have a question, hopefully you can help me.

What happens is that I have a view called (index) qe has a table inside, then in the tables of the table I invoke the same view several times called (prev), in "prev" I have a main div with id="main" that has to contain an image.

The problem is that I want each image to have a different size and position depending on the size of the "main" div, which has a size defined by the size of the table in the table where it uses "renderpartial (prev)", create a function js to do this to change the size and pocision of the image, but as you know the partial views has no context independence, and, the file that the browser reads, receives a table with all the tables loaded with the same div=" main "and the function js qe changes the size and pocision of the image only works on first div=" main "by qe all div are called equal. This would not happen if each partial view had its own context. Any way to do what I need independently between partial views?

P / D recommended me to generate within "prev" the IDs of the div="main" at runtime, something like

<div id="principal@ViewData["indiceRecibido"]"....

but I do not know if it would be a good practice.

javascript asp.net-mvc vistas

asked by Matias Middle 07.01.2018 в 14:41

source

2 answers

Refresh JtextArea clone html elements as selects, radiobuttons in angular 4

score 0 · Answer 1

Thanks for answering.

That's how I stay:

Index :::

<table style="width:100%;height:100%" border="1">
        <tr name="fila1">
            <!--al setear el ancho de las columnas de la primera fila las otras se adaptan solas-->
            <td colspan="4" style="width:68%;height:400px">
               
            </td>
            <td colspan="2" style="width:32%;height:400px">
                @{ Html.RenderPartial("prev", @Model.ElementAt(1)); }
            </td>
        </tr>
        <tr name="fila2">
            <td colspan="3" style="width:50%; height:300px">
                @{ Html.RenderPartial("prev", @Model.ElementAt(2)); }
            </td>
            <td colspan="3" style="width:50%; height:300px">
                @{ Html.RenderPartial("prev", @Model.ElementAt(3)); }
            </td>
        </tr>

@model FormatiLat.Models.Noticia

<script language="JavaScript">

    $(function () {
        var lolo = $("#" [email protected]());
        //si es horizontal
        if (lolo.width() - lolo.height() > 0) {
            var tamaño = lolo.width() / 2;
            lolo.css("width", tamaño);
        }
    });
</script>

<div  class="p-prev">
    <div [email protected]() style="width:100%;height:100%">
        <img id="[email protected]()" src="~/Imagenes/@Model.Imagen" style="width:100%;padding:10px" />
    </div>
</div>

But I still think that there is some way of doing it with the partial views independent of each other, so that you do not have to generate the ids at run time, so that each "prev" has a div and a function that works together and be independent, that do not interfere the ids.

score 0 · Answer 2

What you can do is mark all the elements to be able to select for example with a class:

@model FormatiLat.Models.Noticia

<div  class="p-prev">
  <div class="imagenPrev" style="width:100%;height:100%">
    <img id="[email protected]()" src="~/Imagenes/@Model.Imagen" style="width:100%;padding:10px" />
  </div>
</div>

And the javascript is put in the main view so that all the elements are traversed and resized:

$(function () {
    var prevs = $('.imagenPrev').each(function(i, prev){
      var lolo = $(prev);
      //si es horizontal
      if (lolo.width() - lolo.height() > 0) {
          var tamaño = lolo.width() / 2;
          lolo.css("width", tamaño);
      }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:100%;height:100%" border="1">
      <tr name="fila1">
          <!--al setear el ancho de las columnas de la primera fila las otras se adaptan solas-->
          <td colspan="4" style="width:68%;height:400px">

          </td>
          <td colspan="2" style="width:32%;height:400px">
            <div  class="p-prev">
              <div class="imagenPrev" style="width:100%;height:100%">
                <img src="~/Imagenes/@Model.Imagen" style="width:100%;padding:10px" />
              </div>
            </div>
          </td>
      </tr>
      <tr name="fila2">
          <td colspan="3" style="width:50%; height:300px">
            <div  class="p-prev">
              <div class="imagenPrev" style="width:100%;height:100%">
                <img src="~/Imagenes/@Model.Imagen" style="width:100%;padding:10px" />
              </div>
            </div>
          </td>
          <td colspan="3" style="width:50%; height:300px">
            <div  class="p-prev">
              <div class="imagenPrev" style="width:100%;height:100%">
                <img src="~/Imagenes/@Model.Imagen" style="width:100%;padding:10px" />
              </div>
            </div>
          </td>
      </tr>
    </table>