Dividir Web Form en 3 partes (C#)

Hola, postea el js completo si se puede. Pero lo que estas viendo es básicamente que el js intenta accesar a un nodo del DOM que no existe, por lo tanto devuelve null y dicho null no tiene las propiedades de un nodo html Element. Lo que es un síntoma del problema principal (no saber javascript).

Lo ideal sería obtener el elemento en una variable y validar si dicha variable es distinto a null para operar sobre ella.

Esa sería una solución parche, de ahí tienes que mirar C# a ver si no se rompió el ciclo postback.

quieres que las secciones se puedan mostrar dependiendo de alguna accion?, detalla el porque quieres dividir el formulario

Segment Fault
NullPointerException
NameError / AttributeError.



hace lo que dice @freishner

freishner dijo:

Hola, postea el js completo si se puede. Pero lo que estas viendo es básicamente que el js intenta accesar a un nodo del DOM que no existe, por lo tanto devuelve null y dicho null no tiene las propiedades de un nodo html Element. Lo que es un síntoma del problema principal (no saber javascript).

Lo ideal sería obtener el elemento en una variable y validar si dicha variable es distinto a null para operar sobre ella.

HTML:

<p id="test">Hola mundo</p>

JavaScript:

var elemento = document.getElementById('test');

// un equivalente a if (elemento !== null)
if (!!elemento) {
    // Operar sobre la variable aquí
}

Esa sería una solución parche, de ahí tienes que mirar C# a ver si no se rompió el ciclo postback.

Haz clic para expandir...

Hola, el js es el mismo que aparece en el link que deje en el post:


var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab

function showTab(n) {
// This function will display the specified tab of the form ...
var x = document.getElementsByClassName("tab");
x[n].style.display = "block";
// ... and fix the Previous/Next buttons:
if (n == 0) {
document.getElementById("prevBtn").style.display = "none";
} else {
document.getElementById("prevBtn").style.display = "inline";
}
if (n == (x.length - 1)) {
document.getElementById("nextBtn").innerHTML = "Submit";
} else {
document.getElementById("nextBtn").innerHTML = "Next";
}
// ... and run a function that displays the correct step indicator:
fixStepIndicator(n)
}

function nextPrev(n) {
// This function will figure out which tab to display
var x = document.getElementsByClassName("tab");
// Exit the function if any field in the current tab is invalid:
if (n == 1 && !validateForm()) return false;
// Hide the current tab:
x[currentTab].style.display = "none";
// Increase or decrease the current tab by 1:
currentTab = currentTab + n;
// if you have reached the end of the form... :
if (currentTab >= x.length) {
//...the form gets submitted:
document.getElementById("regForm").submit();
return false;
}
// Otherwise, display the correct tab:
showTab(currentTab);
}

function validateForm() {
// This function deals with validation of the form fields
var x, y, i, valid = true;
x = document.getElementsByClassName("tab");
y = x[currentTab].getElementsByTagName("input");
// A loop that checks every input field in the current tab:
for (i = 0; i < y.length; i++) {
// If a field is empty...
if (y.value == "") {
// add an "invalid" class to the field:
y.className += " invalid";
// and set the current valid status to false:
valid = false;
}
}
// If the valid status is true, mark the step as finished and valid:
if (valid) {
document.getElementsByClassName("step")[currentTab].className += " finish";
}
return valid; // return the valid status
}

function fixStepIndicator(n) {
// This function removes the "active" class of all steps...
var i, x = document.getElementsByClassName("step");
for (i = 0; i < x.length; i++) {
x.className = x.className.replace(" active", "");
}
//... and adds the "active" class to the current step:
x[n].className += " active";
}

Gran_Maestre dijo:

quieres que las secciones se puedan mostrar dependiendo de alguna accion?, detalla el porque quieres dividir el formulario

Haz clic para expandir...

Solo que se dividan en 3 paginas (o vistas) dentro de la misma pagina original. Que se separen y luego irlas completando y avanzando con el boton siguiente. Ninguna condicion especial para ir cambiando entre ellas.

red_knight dijo:

Hola, el js es el mismo que aparece en el link que deje en el post

Haz clic para expandir...

Pensé que era un form de empresa o algo, lo que comentas es un flujo, no hay una única forma de hacer eso, pero no entraría a calentarme la cabeza con algoritmos complejos, es tan sencillo como tener 3 divs, cada uno con un id, obtener una variable con cada div que para efectos de claridad llamaremos contenedores c[n], y con dicha variable accesar a los elementos, así te ahorras todos los nulls.

Ésto es lo más sencillo que podrías hacer para ahorrarte cualquier dolor de cabeza. Y dentro de la función del evento click del objeto bsend, puedes llamar a una función que realice las validaciones respectivas con un if, si da true le haces submit al form, si no no.

freishner dijo:

Pensé que era un form de empresa o algo, lo que comentas es un flujo, no hay una única forma de hacer eso, pero no entraría a calentarme la cabeza con algoritmos complejos, es tan sencillo como tener 3 divs, cada uno con un id, obtener una variable con cada div que para efectos de claridad llamaremos contenedores c[n], y con dicha variable accesar a los elementos, así te ahorras todos los nulls.

Ésto es lo más sencillo que podrías hacer para ahorrarte cualquier dolor de cabeza. Y dentro de la función del evento click del objeto bsend, puedes llamar a una función que realice las validaciones respectivas con un if, si da true le haces submit al form, si no no.

Haz clic para expandir...

Muchas gracias por tu tiempo freishner. Voy a aplicar esto, a ver como me va, y te cuento.